javascript - How to implement a Dropzone for folders in a ReactElectron app and process the folder contents? - Stack Overflow

admin管理员组

文章数量:1404612

Is there a way in electron based apps to let a user drop a folder onto a React-component and handle the drop event so that the main process can fully access it and recursively scan the folder’s contents?

My setup so far:

• the Renderer has a <DropZone> component with onDrop and onDragOver.
• the drop event fires and i can see event.dataTransfer.files, but the path (webkitRelativePath) for dropped folders is empty also for files.

const folderDropped = async (event: React.DragEvent) => {
  event.preventDefault();

  // If a folder or file has been dragged
  if (event.dataTransfer.files.length > 0) {
    const filePath = event.dataTransfer.files[0].path;
    console.log("Drop event:", event.dataTransfer.files);
    console.log("Dropped file path:", filePath);

    // Call the IPC handler: readDroppedFile
    const result = await window.api.readDroppedFile(filePath, browserWindowId);
    console.log("readDroppedFile result:", result);

     /* Further Process:
       After the api call, the object is checked if its a folder and that it contains files
       of a specific type (for example, only PNG files). Once confirmed, the main process will scan through all the
       files within the folder recursively.
    */
  }
};

Visual Studio Code, which is also built with Electron, can accept dropped files and folders from the Explorer, so it should be possible for my app as well.

Additional details (optional):

• Electron version: 35
• React version: 19
• Windows 11

Is there a way in electron based apps to let a user drop a folder onto a React-component and handle the drop event so that the main process can fully access it and recursively scan the folder’s contents?

My setup so far:

• the Renderer has a <DropZone> component with onDrop and onDragOver.
• the drop event fires and i can see event.dataTransfer.files, but the path (webkitRelativePath) for dropped folders is empty also for files.

const folderDropped = async (event: React.DragEvent) => {
  event.preventDefault();

  // If a folder or file has been dragged
  if (event.dataTransfer.files.length > 0) {
    const filePath = event.dataTransfer.files[0].path;
    console.log("Drop event:", event.dataTransfer.files);
    console.log("Dropped file path:", filePath);

    // Call the IPC handler: readDroppedFile
    const result = await window.api.readDroppedFile(filePath, browserWindowId);
    console.log("readDroppedFile result:", result);

     /* Further Process:
       After the api call, the object is checked if its a folder and that it contains files
       of a specific type (for example, only PNG files). Once confirmed, the main process will scan through all the
       files within the folder recursively.
    */
  }
};

Visual Studio Code, which is also built with Electron, can accept dropped files and folders from the Explorer, so it should be possible for my app as well.

Additional details (optional):

• Electron version: 35
• React version: 19
• Windows 11

• javascript
• reactjs
• typescript
• electron

Share Improve this question Follow asked Mar 10 at 16:46 silvio_lsilvio_l 2111 silver badge44 bronze badges 2

• Have you tried the webUtils.getPathForFile method? – yuanyxh Commented Mar 11 at 3:23
• Yes, I tried that. Unfortunately, it results in an error on the frontend. ///> Uncaught ReferenceError: __dirname is not defined </// I get this error when I try to execute "webUtils.getPathForFile" on dataTransfer.files[0]. – silvio_l Commented Mar 12 at 11:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Ahh, I solved it now. I found the following: // Planned Breaking API Changes (32.0) >> Removed: File.path //. This can be found on the Electron website: "https://www.electronjs./docs/latest/breaking-changes#removed-filepath" So I have to go the way via a preload.js script.

// (renderer)
const file = event.dataTransfer.files[0].
electronAPI.getFilePath(file)

// (preload)
import {
  contextBridge,
  webUtils
} from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
  getFilePath(file) {
    return webUtils.getPathForFile(file)
  }
})

本文标签：