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

При использовании <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

  1. Далее создайте в папке файл 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, указывающим на путь к папке, которую нужно открыть. В случае успешного открытия папки в проводнике, сервер возвращает сообщение "Папка открыта в проводнике".

  1. Затем в этой же папке создайте файл 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>

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

node server.js

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

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

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

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

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

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