React Electron File Drop не может получить FilePath ⇐ Javascript

[Anonymous]

Я пытаюсь создать приложение React + Electron, которое поддерживает перетаскивание файлов. Цель состоит в том, чтобы пользователи смогли перетащить файлы в поле, а приложение для извлечения полного пути полного файла из системы пользователя. Прямо сейчас я могу захватить и отображать имена файлов, но путь всегда в конечном итоге становится NULL или пустой строкой. ) с моим кодом:
https://github.com/martinbarker/electro ... -pilefrish my main.js журналы:
1 Файл упал: 11-shonuff_by_omid-cms.mp3-undefined < /p>
< /p>
Ниже приведены соответствующие части моего кода. (Примечание: я также включаю операторы импорта.) < /P>

Код: Выделить всё

import React, { useState } from 'react';
import './App.css';

function App() {
const [files, setFiles] = useState([]);

const handleDrop = (event) => {
event.preventDefault();
const droppedFiles = Array.from(event.dataTransfer.files);
setFiles(droppedFiles);
droppedFiles.forEach(file => {
console.log(`File dropped: ${file.name} - ${file.path}`);
});
if (window.electron) {
console.log('Sending files-dropped event to main process');
window.electron.sendFiles(droppedFiles.map(file => ({ name: file.name, path: file.path })));
}
};

const handleFileSelect = (event) => {
const selectedFiles = Array.from(event.target.files);
setFiles(selectedFiles);
selectedFiles.forEach(file => {
console.log(`File selected: ${file.name} - ${file.path}`);
});
if (window.electron) {
console.log('Sending files-dropped event to main process');
window.electron.sendFiles(selectedFiles.map(file => ({ name: file.name, path: file.path })));
}
};

const handleDragOver = (event) => {
event.preventDefault();
};

return (


Drag and drop files here, or click to select files


[list]
{files.map((file, index) => (
[*]{file.name} - {file.path}
))}
[/list]

);
}

export default App;
< /code>
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')  // Add this line
},
});

const isDev = !app.isPackaged; // Check if the app is in development mode
const startUrl = isDev
? 'http://localhost:3000' // Load from React dev server
: `file://${path.join(__dirname, 'build', 'index.html')}`;

mainWindow.loadURL(startUrl);

if (isDev) {
mainWindow.webContents.openDevTools(); // Open DevTools in development mode
}

mainWindow.on('closed', () => {
mainWindow = null;
});
}

ipcMain.on('files-dropped', (event, files) => {
console.log('Received files-dropped event');
files.forEach(file => {
console.log(`File dropped: ${file.name} - ${file.path}`);
});
});

app.whenReady().then(() => {
console.log('App is ready');
createWindow();
});

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
if (mainWindow === null) createWindow();
});
< /code>
[b]What I've tried / Additional Info:[/b]

[*]I've confirmed that I'm able to retrieve the file name from file.name

.
Однако файл. > Я пытался включить Nodeintegration , но я понимаю, что это не идеально по соображениям безопасности. Кроме того, это не устранило проблему пути. Путь файла для каждого отброшенного файла в настройке React + Electron? Есть ли что -то в моей нынешней настройке, чтобы не допустить захвата пути? Любые советы или рекомендуемые изменения в мои сценарии предварительной нагрузки или обороты в BrowserWindow ?
Заранее спасибо за какое -либо руководство!

Подробнее здесь: https://stackoverflow.com/questions/794 ... t-filepath