I have an app that stores files and uses drag+drop to upload them. Is there a way I can drag+drop to download the file to my desktop instead of having to click "download." Basically, the opposite of drag+drop upload.

I have an app that stores files and uses drag+drop to upload them. Is there a way I can drag+drop to download the file to my desktop instead of having to click "download." Basically, the opposite of drag+drop upload.

• javascript
• jquery
• drag-and-drop

• If that was possibly I would imagine you would have to write a browser extension. – The Muffin Man Commented Mar 23, 2011 at 20:56
• Actually, it's possible with Chrome: thecssninja./javascript/gmail-dragout – raymi Commented Jun 8, 2011 at 9:33
• @raymi link is broken by me. Can you please provide a new link? – YTG Commented Apr 4, 2021 at 8:10

4 Answers 4

The html5rocks and cssninja are ok, but I think way overkill for quick answers. Here is a simple example of using drag events from something, including to download files.

<style>
div { background-color: #eee; border: 1px solid black; padding: 5px; float: left; clear: both; }
</style>
<div id="uiLinkText"           draggable="true">Drag <b>Text</b> to a text editor </div>
<div id="uiLinkHyperlink"      draggable="true">Drag <b>Hyperlink</b> to address bar </div>
<div id="uiLinkUrlDownload"    draggable="true">Drag <b>Url Download</b> to file system </div>
<div id="uiLinkStaticDownload" draggable="true">Drag <b>Static Download</b> to file system </div>
<script>
document.getElementById('uiLinkText').ondragstart = function(event){
  // plain text, for dropping into text editor
  event.dataTransfer.setData('text/plain', 'Go to http://stackoverflow./questions/5411481/ to read about this.');
}
document.getElementById('uiLinkHyperlink').ondragstart = function(event){
  // URL, for dropping into the browser's address bar
  event.dataTransfer.setData('text/uri-list', 'http://stackoverflow./questions/5411481/');
}
document.getElementById('uiLinkUrlDownload').ondragstart = function(event){
  // file download contents, for dropping into a file system
  event.dataTransfer.setData('DownloadURL', 'text/plain:SourceQuestion.html:http://stackoverflow./questions/5411481/')
}
document.getElementById('uiLinkStaticDownload').ondragstart = function(event){
  var textToWrite = 'file contents here';
  var textFileAsBlob = new Blob([textToWrite], { type: 'text/xml' });
  var url = window.URL.createObjectURL(textFileAsBlob);
  // file download contents, for dropping into a file system
  event.dataTransfer.setData('DownloadURL', 'text/plain:Static.txt:' + url)
}
</script>

Warning: While this worked fine for me in Chrome locally (in Windows 7), when I tried putting it on jsfiddle for a linke, the "Static Download" did not work, and the "Url Download" crashed Google Chrome.

As with most drag-and-drop, it does not work with MSIE 9, I have not tried 10+ or Firefox.

It is supported in Google Chrome only.
http://www.html5rocks./en/tutorials/dnd/basics/#toc-desktop-dnd-out For example it is implemented in Gmail.

None of any other browsers support this behavior.

No, you would need to be able to set a download path, if nothing else, which no browsers allow you to do. It's possible with a plugin, but not straight JS.

Well, i tried on Floorp, which is a firefox-based browser and i use KDE Plasma on my puter and dragging it to the file manager causes it to download like this enter image description here