Whether you’re a web developer or just an everyday user, you’ve probably encountered Drag-and-Drop file uploading. You use it when tossing photos onto Facebook or attaching files in Gmail. Drag-and-Drop isn’t exactly a new conceptāit’s how we’ve been moving files around our desktops for decades. But while there are thousands of tutorials covering how to build Drag-and-Drop uploads for the web, very few talk about Drag-and-Drop downloads. Let’s take a quick look at how to implement this cool HTML5 feature.
What exactly is Drag-and-Drop Download?
If you’ve ever used a cloud service like Box, you might have noticed that you can drag a file directly from your web browser and drop it onto your desktop to download it. You can even drag a file straight into your printer’s queue or drop it into a messaging app to send it to a friend. It completely eliminates the tedious “Right-Click -> Save As” workflow and saves you from having to dig through your file system.
What do you need to get started?
Because Drag-and-Drop is an HTML5 feature, you’ll need a modern browser to test it (Google Chrome was one of the early pioneers of this specific download API). If you’re building this into a production app, you’ll probably want to use a tool like Modernizr to check for feature support so you can provide fallbacks for older browsers.
The Markup
First, you need to add a bit of JavaScript to your page. You can place this in your <head> or right before your closing </body> tag for better performance.
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
}, false);
}
In this script, we’re looking for any element with the class dragout. We then attach an event listener that passes the file’s download URL into the browser’s native data transfer object when the drag begins.
Next, you need to add a specific data attribute to the HTML element you want the user to drag:
data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE"
You must also include the draggable="true" attribute so the browser knows the element can be picked up. Put it all together, and your HTML should look like this:
<a href="http://example.com/sample.pdf" class="dragout" draggable="true" data-downloadurl="application/pdf:sample.pdf:http://example.com/sample.pdf">PDF file</a>
Let’s break down how the data-downloadurl attribute works. It consists of three parts separated by colons:
- Mimetype: The exact MIME type of your file (e.g.,
application/pdforimage/png). - Filename: The name the file will have when it saves to the user’s desktop.
- Absolute URL: The full web path to where the file actually lives.
And that’s it! Once you’ve added the class, the draggable flag, and the data attribute, your users can seamlessly drag files right out of your web app.
For more deep dives into HTML5 features, I highly recommend checking out the interactive slide decks over at html5rocks.com.