Possible to get local filesystem path from drag-and-drop file?


#1

I’m experimenting with an Electron-based media gallery app, that can navigate through all images and videos in a given directory using arrow keys or mouse clicks.

I can implement a native File->Open menu item in the main process, and from that obtain the full local path of a file. However, it would also be great to implement drag-and-drop, so that dragging a file or video onto the Electron window had the same effect.

The problem I’m finding is that the main process doesn’t seem to have functionality for intercepting such a drop event… and the ondrop DOM event in the renderer process doesn’t provide local path information due to the JavaScript security model.

Is there any way to work around this, and obtain the full local filesystem path for a file that’s drag-and-dropped onto an Electron window? Thanks!


#2

I added the following to renderer.js from the quick-start app and when I drop files in the body the log contains the full path to the file or directory.

document.ondragover = document.ondrop = (ev) => {
  ev.preventDefault()
}

document.body.ondrop = (ev) => {
  console.log(ev.dataTransfer.files[0].path)
  ev.preventDefault()
}


#3

Thank you very much!