Как я могу получить путь к выбранному файлу в ReactJS?

Question

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

Я знаю, что невозможно получить путь к файлу из простого <input type="file"/> по соображениям безопасности, но я интересовался, есть ли способ сделать это, которого я просто не нашел, или даже метод в узле, который я мог бы использовать, передав имя файла в серверную часть node.js, которая могла бы помочь мне найти путь.

Я также уже изучал пакет fs-path npm в узле, чтобы найти все пути и файлы, чтобы потенциально сопоставить имя файла с этим путем, но это не помогает мне, если их больше одного файл с тем же именем по другому пути.

Кажется, я не могу найти никаких других предложений, кроме как просто загрузить все содержимое файла, что я не хочу делать.

Answer 1

Поскольку мне нужно было запускать свое приложение в обычном браузере, я не мог использовать что-то вроде Electron JS. Вместо этого я создал серверную часть в Node JS и отправил запрос на серверную часть узла для всех файлов в заранее определенном каталоге. Затем я использовал fs.readdir, чтобы вернуть все файлы и каталоги в файле, и отобразил их в моем интерфейсном приложении React, после чего я позволил пользователю выбрать файл или каталог. Если был выбран файл, то у меня был мой путь к файлу, поскольку я уже знал, что это за текущий каталог. Если был выбран каталог, к тому же API был отправлен другой запрос на получение файлов и каталога нового каталога.

app.get('/api/fileFinder', async (req, res) => {
    const mainDir = req.query.name || '/efs/data';
    console.log(mainDir);
    fs.readdir(mainDir, function(err, items) {
        const dirs = [];
        const files = [];
        if (items){
            for (var i=0; i<items.length; i++) {
                if (fs.lstatSync(mainDir + '/' + items[i]).isDirectory()){
                    dirs.push(items[i]);
                }
                else{files.push(items[i])}
            }
        }
        res.setHeader('Content-Type', 'application/json');
        res.send(JSON.stringify({
            files: files,
            dirs: dirs
        }));
    });

Чтобы запустить и ReactJS, и NodeJS на одном и том же порте, я построил ReactJS и добавил его на сервер NodeJS поместив файл сборки в ту же папку, что и файл NodeJS, и добавив app.use(express.static(__dirname + '/build')); к NodeJS.

Надеюсь, это поможет всем, кто сталкивается с аналогичной проблемой.