如何在React/Electron应用中实现文件夹的Dropzone并处理文件夹内容？

Question

基于电子的应用程序有一种方法可以让用户将文件夹放在反应组件上并处理掉落事件，以便主过程可以完全访问它并递归扫描文件夹的内容？

到目前为止，我的设置：

• 渲染器具有

  <DropZone>

  和

  onDrop

  的组件。

  下降事件射击，我可以看到

  onDragOver
，但是掉落文件夹的路径（
• event.dataTransfer.files

  ）也为文件。
  

  webkitRelativePath

Visual Studio Code（也是通过电子构建的）可以接受资源管理器的删除文件和文件夹，因此我的应用程序也应该可以接受。

additional细节（可选）：

电子版本：35

反射版本：19

windows11

，我现在解决了。我找到了以下内容：//计划的破坏API更改（32.0）>>删除：file.path //。可以在电子网站上找到：“ https：//www.electronjs.org/docs/latest/breaking-changes#remaskes#remask-filepath”因此，我必须通过PRELOAD.JS脚本走去。

Answer 1

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.
    */
  }
};