Как из браузера открыть папку в проводнике Windows используя ExpressJS

Представьте, у вас возникла необходимость прямо с локальной веб-страницы открывать папку с файлами. Но не просто отображать содержимое папки, а прямо на компьютере открывать проводник с этой папкой.

При использовании <a href="file://C:/"></a> все современные браузеры блокируют запрос из-за CORS.

Предлагаю решение данной проблемы через простой сервер ExpessJS.

Ранее уже была статья на эту тему.

Установка

1. Убедитесь, что у вас установлен Node.js. Если нет, вы можете загрузить и установить его с официального сайта Node.js.

2. Создайте на вашем ПК папку для сервера, например open-windows-folder-with-browser

3. Перейдите в каталог с проектом:
   cd open-windows-folder-with-browser

4. Установите ExpressJS

npm install express

5. Далее создайте в папке файл server.js и поместите туда следующий код (ОБНОВЛЕН).

Замените allowedPaths на путь к вашей разрешенной папке (нескольким папкам).

const express = require("express"); const path = require("path"); const { execFile } = require("child_process");  const app = express(); const PORT = 3030;  // Function to open a folder in the file explorer function openFolderInExplorer(folderPath) {     if (!isValidFolderPath(folderPath)) {         throw new Error("Недопустимый путь к папке");     }      const platform = process.platform;     const explorerCommand = platform === "win32" ? "explorer.exe" : "open";     const args = [folderPath];      try {         execFile(explorerCommand, args, { stdio: "ignore" });         return "Success";     } catch (error) {         console.error(`exec error: ${error}`);         throw new Error("Ошибка при открытии папки");     } }  // Function to validate folder path function isValidFolderPath(folderPath) {     // Enhanced validation:     const allowedPaths = ["C:\\ESD", "/path/to/allowed/folder2"];     return typeof folderPath === "string" && path.isAbsolute(folderPath) && allowedPaths.includes(folderPath); }  // CORS middleware with more restrictive configuration app.use((req, res, next) => {     res.header("Access-Control-Allow-Origin", "*");     res.header("Access-Control-Allow-Methods", "GET");     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");     next(); });  // Endpoint to open a folder in the file explorer app.get("/open-folder", (req, res) => {     const folderPath = req.query.path;      if (!isValidFolderPath(folderPath)) {         res.status(400).send("Недопустимый путь к папке");         return;     }      try {         openFolderInExplorer(folderPath);         res.send("Папка открыта в проводнике");     } catch (error) {         console.error(error);         res.status(500).send("Ошибка при открытии папки");     } });  // Starting the server app.listen(PORT, () => {     console.log(`Сервер запущен на порту ${PORT}`); }); 

Данный код представляет собой простое веб-приложение на базе Express.js, которое позволяет открывать указанную папку в файловом проводнике операционной системы пользователя.

Приложение использует Express.js для создания сервера на порту 3030. Оно также содержит функцию openFolderInExplorer, которая определяет операционную систему пользователя и запускает соответствующую команду для открытия папки в проводнике: для macOS используется команда open, а для Windows — start explorer.

Приложение также включает промежуточное ПО CORS для обеспечения кросс-доменного обмена ресурсами и имеет конечную точку /open-folder, которая принимает запрос с параметром path, указывающим на путь к папке, которую нужно открыть. В случае успешного открытия папки в проводнике, сервер возвращает сообщение «Папка открыта в проводнике».

6. Затем в этой же папке создайте файл index.html. Данный файл будет содержать инпут для ввода пути к папке и кнопку для отправки запроса на сервер.

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8" />         <meta name="viewport" content="width=device-width, initial-scale=1.0" />         <title>Открыть папку</title>         <style>             body {                 font-family: Arial, sans-serif;                 background-color: #f4f4f4;                 margin: 0;                 padding: 0;                 display: flex;                 justify-content: center;                 align-items: center;                 height: 100vh;             }              button {                 padding: 10px 20px;                 font-size: 16px;                 background-color: #007bff;                 color: #fff;                 border: none;                 border-radius: 5px;                 cursor: pointer;                 transition: background-color 0.3s ease;             }              button:hover {                 background-color: #0056b3;             }              input {                 padding: 8px;                 font-size: 16px;                 border: 1px solid #ccc;                 border-radius: 5px;                 margin-right: 10px;             }         </style>     </head>     <body>         <input type="text" id="folderPath" placeholder="Введите путь к папке" />         <button onclick="openFolder()">Открыть папку</button>         <script>             const SERVER_ADDRESS = "http://localhost:3030";              function openFolder() {                 const folderPathInput = document.getElementById("folderPath");                 const folderPath = folderPathInput.value.trim();                 console.log(`Attempting to open folder: ${folderPath}`);                 if (folderPath === "") {                     alert("Пожалуйста, введите путь к папке");                     return;                 }                  fetch(`${SERVER_ADDRESS}/open-folder?path=${encodeURIComponent(folderPath)}`)                     .then((response) => {                         if (!response.ok) {                             throw new Error("Error opening folder");                         }                         console.log("Folder opened successfully");                     })                     .catch((error) => {                         console.error("Error:", error);                     });             }         </script>     </body> </html> 

7. Запустите сервер, введя команду в консоли

node server.js

8. Откройте страницу index.html в браузере.

9. Введите нужный путь к папке, и нажмите «Открыть папку».

Готово, теперь можно с легкостью открывать нужные папки через браузер.

Данная статья показывает только маленькую часть того, как можно быстро обращаться к различным папкам в огромном реестре оборудования или файловой структуре.

В дальнейшем нужно просто создать несколько кнопок со статическими путями, удалив поле ввода пути.

Полный код доступен на GitHub ?‍⬛