<!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>