React Electron File Drop kann Filepath nicht erhalten ⇐ HTML

[Guest]

Ich versuche, eine React + Electron -App zu erstellen, die den Drag & Drop von Datei unterstützt. Das Ziel ist es, dass Benutzer Dateien in ein Feld ziehen und die App den vollständigen Dateipfad vom Benutzersystem abrufen können. Im Moment kann ich die Dateinamen erfassen und anzeigen, aber der Pfad ist immer null oder eine leere Zeichenfolge. ) Mit meinem Code:
https://github.com/martinbarner/electro ... -file-drop
Wenn ich eine Datei ziehe, kann ich so etwas in so etwas sehen My Main.JS-Protokolle:
1 Datei fallen gelassen: 11-suff_by_omid-cms.mp3-undefined < /p>
< /p>
Unten finden Sie die relevanten Teile meines Codes. (Hinweis: Ich füge auch die Importanweisungen ein.) < /P>

Code: Select all

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

.
[*] Datei.Path kommt jedoch sowohl im Renderer- als auch im Hauptprozessprotokollen immer undefiniert.
Ich habe versucht, die NodeIntegration zu aktivieren, aber ich verstehe, dass dies aus Sicherheitsgründen nicht ideal ist. Außerdem hat das das Pfadausgabe nicht behoben. Dateipfad für jede fallengelassene Datei in einem React + Electron Setup? Gibt es etwas in meinem aktuellen Setup, das verhindert, dass der Pfad erfasst wird? Irgendwelche Tipps oder empfohlenen Änderungen an meinen Vorspannungsskripten oder Webpreferenzen in BrowserWindow ?
Vielen Dank im Voraus für eine Anleitung!