Native File Drag & Drop

Certain kinds of applications that manipulate files might want to support the operating system's native file drag & drop feature. Dragging files into web content is common and supported by many websites. Electron additionally supports dragging files and content out from web content into the operating system's world.

To implement this feature in your app, you need to call webContents.startDrag(item) API in response to the ondragstart event.

In your renderer process, handle the ondragstart event and forward the information to your main process.

<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
  document.getElementById('drag').ondragstart = (event) => {
    event.preventDefault()
    ipcRenderer.send('ondragstart', '/path/to/item')
  }
</script>

Then, in the main process, augment the event with a path to the file that is being dragged and an icon.

const { ipcMain } = require('electron')

ipcMain.on('ondragstart', (event, filePath) => {
  event.sender.startDrag({
    file: filePath,
    icon: '/path/to/icon.png'
  })
})

1.1 KiB Raw Blame History

Native File Drag & Drop

1.1 KiB

Raw Blame History