<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Drag and drop files</title> </head> <body> <div> <h1>Drag and drop files</h1> <div>Supports: Win, macOS, Linux <span>|</span> Process: Both</div> <h3> Electron supports dragging files and content out from web content into the operating system's world. </h3> <p> Open the <a href="https://electronjs.org/docs/tutorial/native-file-drag-drop"> full API documentation (opens in new window) </a> in your browser. </p> </div> <div> <div> <h2>Dragging files</h2> <div> <div> <a href="#" id="drag-file-link">Drag Demo</a> </div> <p> Click and drag the link above to copy the renderer process javascript file on to your machine. </p> <p> In this demo, the <code>webContents.startDrag()</code> API is called in response to the <code>ondragstart</code> event. </p> <h5>Renderer Process</h5> <pre><code> const {ipcRenderer} = require('electron') const dragFileLink = document.getElementById('drag-file-link') dragFileLink.addEventListener('dragstart', (event) => { event.preventDefault() ipcRenderer.send('ondragstart', __filename) }) </code></pre> <h5>Main Process</h5> <pre> <code> 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) }) }) </code></pre> </div> </div> </div> <script> // You can also require other files to run in this process require("./renderer.js"); </script> </body> </html>