HTML 5 DnD Download: A Quick Implementation

So whatever you are, a developer or a user you might know about Drag and Drop Upload. You might have used it on Facebook for uploading photos or in G-Mail for uploading attachments and even on other sites also. Drag and drop is not a new thing, remember how you copy files from your pen drive. What you do is, re-size the window and then you drag required files from desktop to pen-drive or vice-versa. That is nothing but drag and drop. Here on the web, there are many implementations and tutorial are available for creating Drag and Drop upload but there are only few for Drag and Drop Download. Here in this post you will get a quick look on this HTML 5 feature.

So what actually drag and drop download means?

Have you ever tried box.net? f yes then you might know that box allows you to save files to your computer by dragging them from your browser to your desktop. You can even drag the files from you account to printer, in order to print them. You can even drag them into messenger so as to send that file to your friend. As drag and drop upload, Drag and drop download allows you to download any file directly from the internet to required location without doing donkey work of selecting save as from menu and lookup for required folder each time.

What you need?

Drag and drop is an HTML 5 feature. You can implement in on your site or in app which is built on HTML 5. Currently only few browsers like Google chrome supports this feature. So even if your browser is HTML 5 enabled you might need to use Modnizer to check whether you can implement HTML 5 Drag and Drop or not.

The Markup

Initially you need to insert following Java script either in head of your document or in footer of your document(if you want to decrease page load time).

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);
}

Here we have used dragout class inorder to implement drag and drop. So you need to add this dragout class in each element where you are going to implement drag and drop functionality.

Then you can add following tag in element where you want to implement DnD

data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE"

You must add draggable=”true” attribute to all elements  in order to make them draggable. Then whole code for an element may look like this

<a href="http://example.com/sample.pdf" draggable="true" data-downloadurl="application/sample.pdf:http://example.com/sample.pdf">PDF file</a>

Here we have considered a link as our element. We have made it draggable by putting draggable=”true” and also added functionality of drag and drop with class=”dragout” . Now we have to specify which file is to be downloaded when an user uses DnD. This file is need to be specified in data-downloadurl.

Data-downloadurl has three parts,

  1. Mimetype: Here you should specify mime-type of your file. You can refer this site for mime information.
  2. Filename: The name of file which will appear on user’s desktop.
  3. Absolute_url_to_file: Url at which the file is located.

Once you are done with this you are ready with drag and drop download.

An example code is as follows

<a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf" class="dragout" data-downloadurl="application/pdf:Chrome3DGlasses.pdf:http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf">.pdf file

You can also refer HTML 5 slides at html5rocks.com for example by following this link slides.html5rocks.com/#drag-out

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.