Drag and drop files

Click and drag the link above to copy the renderer process javascript file on to your machine.

In this demo, the webContents.startDrag() API is called in response to the ondragstart event.

Renderer Process

const {ipcRenderer} = require('electron')

const dragFileLink = document.getElementById('drag-file-link')

dragFileLink.addEventListener('dragstart', (event) => {
  event.preventDefault()
  ipcRenderer.send('ondragstart', __filename)
})
        

Main Process

            
const {ipcMain} = require('electron')
const path = require('path')

ipcMain.on('ondragstart', (event, filepath) => {
  const iconName = 'codeIcon.png'
  event.sender.startDrag({
    file: filepath,
    icon: path.join(__dirname, iconName)
  })
})