Search code examples
javascriptdrag-and-drop

Drag a file out of the browser


Most tutorials on javascript drag and drop explain how to handle file drops into the browser and how to drag data out of the browser. But I have seen almost nothing about draging a file out of the browser.

For example, you start a drag on a div element, drop it on the desktop and a file appears there.

What I have found is this: (from this example)

e.dataTransfer.setData('DownloadURL', `image/png:Luigi.png:${e.target.href}`);

However, as far as I can see, setting using DownloadURL this causes errors in chrome, a crash report in edge and doesn't do anything in firefox.

Is there a standard way to download a file through drag and drop, preferably from a url?


Solution

  • Ok, the problem in the example seems to be that Chrome now requires same origin on the DownloadURL.

    At least that's what the Firefox developers believe that have had an issue to replicate this feature for 11 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=570164

    Safari doesn't seem to support it either