Native File Drag & Drop

    To implement this feature in your app, you need to call the API in response to the event.

    Example

    An example demonstrating how you can create a file on the fly to be dragged out of the window.

    Add a draggable element to index.html, and reference your renderer script:

    1. <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag">Drag me</div>
    2. <script src="renderer.js"></script>

    In renderer.js set up the renderer process to handle drag events by calling the method you added via the contextBridge above.

    docs/fiddles/features/drag-and-drop (23.0.0)

    • main.js
    • preload.js
    • index.html
    • renderer.js
    1. const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
    2. const path = require('path')
    3. const fs = require('fs')
    4. const https = require('https')
    6. function createWindow() {
    7.   const win = new BrowserWindow({
    8.     width: 800,
    9.     height: 600,
    10.     webPreferences: {
    11.       preload: path.join(__dirname, 'preload.js')
    12.     }
    14.   win.loadFile('index.html')
    17. const iconName = path.join(__dirname, 'iconForDragAndDrop.png');
    18. const icon = fs.createWriteStream(iconName);
    20. // Create a new file to copy - you can also copy existing files.
    21. fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
    22. fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
    24. https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
    25.   response.pipe(icon);
    26. });
    28. app.whenReady().then(createWindow)
    30. ipcMain.on('ondragstart', (event, filePath) => {
    31.   event.sender.startDrag({
    32.     file: path.join(__dirname, filePath),
    33.     icon: iconName,
    34.   })
    35. })
    38.     app.quit()
    39.   }
    40. })
    42. app.on('activate', () => {
    43.   if (BrowserWindow.getAllWindows().length === 0) {
    44.     createWindow()
    45.   }
    46. })
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7. </head>
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
    11.     <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
    12.     <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag me - File 2</div>
    13.     <script src="renderer.js"></script>

    After launching the Electron application, try dragging and dropping the item from the BrowserWindow onto your desktop. In this guide, the item is a Markdown file located in the root of the project: