Enable drag and drop file selection in Electron app and retrieve file paths

1. Set up Drag-and-Drop Area
2. Expose IPC Functions with Preload script

Dragging files into web pages is common and widely supported by many websites.

Set up Drag-and-Drop Area

This is an example:

function App() {
  const [filePaths, setFilePaths] = useState([]);

  const handleDragOver = (e: DragEvent) => {
    e.preventDefault();
  };

  const handleDragLeave = (e: DragEvent) => {
    e.preventDefault();
  };

  const handleDrop = async (e: DragEvent) => {
    e.preventDefault();
    const selectedFiles = [...e.dataTransfer.files];
    if (selectedFiles.length) {
      const paths = await window.electron.getSelectedFilePaths(selectedFiles);
      setFilePaths(paths);
    }
  };

  return (
    <div>
      <div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        style={{
          width: "300px",
          height: "200px",
          border: "2px dashed #ccc",
          textAlign: "center",
          lineHeight: "200px",
        }}
      >
        Drag files to here
      </div>
      <div>
        Path:
        {filePaths.map((path) => (
          <p key={path}>{path}</p>
        ))}
      </div>
    </div>
  );
}

For security reasons, path is not included in the file information for the selected files. Fortunately, Electron provides the webUtils.getPathForFile() function which can return the file absolute path.

Expose IPC Functions with Preload script

To make window.electron.getSelectedFilePaths function available in renderer script, it must be exposed in preload script:

import { webUtils, contextBridge, ipcRenderer } from "electron";

contextBridge.exposeInMainWorld("electron", {
  getSelectedFilePaths: (files: File[]) => {
    const filePaths = files.map((file) => webUtils.getPathForFile(file));
    return filePaths;
  },
});

In the code above, webUtils.getPathForFile is called in the exposed getSelectedFilePaths function, then return the result to the renderer script.