02 Dec

HTML5 Drag, Drop and FileReader in JavaScript

HTML5 Logo

I love JavaScript. And combine that with the awesome power of HTML5 and I have an ice cream with generous serving of hot chocolate sauce on top.

Till HTML5 came about, there was no way in which JavaScript could receive a Drag & Drop event from the File System. Sure you could drag and drop elements inside browser window but not files from outside the window.

Plus JavaScript had no way in which it could process a file selected in an input[type=file] control on the client side. So if you wanted to upload a set of images to an online gallery you could only preview the image or check its properties after the upload completed. And it would be such a pain to realize that you selected the wrong set of images to start with. So re-upload!

In the new HTML5 supported browsers, one can write methods to process a file using the new File API. Although not strictly part of HTML5, it is currently supported only in Firefox 4+ and Chrome 7+ and other browsers are quickly falling in line.

So JavaScript’s events “dragover”, “dragleave” and “drop” can now respond to files dragged and dropped from the file system. And the “FileReader” object can read text files, file properties like size, name, path etc., read an image file and load a preview – all on the client side using plain JavaScript.

Check out the sample demo here.

So here is how to get started:

The addEvent method is my handy library function to attach Event Listeners to DOM elements in a cross browser fashion. The event object passed to the event listener contains a property “dataTransfer” which contains the reference to the selected/dropped files.

TIP: Remember, during a drag and drop, it is the element that receives the drop that will contain the dropped files. It need not be an input[type=file] control.

To give a feedback to the user that the page is responding to the drag and drop, I have incorporated the following technique:

Now to process the uploaded files. JavaScript has got this new object called the FileReader which is what I am using here:

We create a FileReader object, bind an onload event handler to the reader which will process the read file and perform the necessary operations to update the UI (as required) and then we call the reader.ReadAsText() method to read the text data of a file. We can even use the reader.ReadAsDataUrl() method to read binary image data as an encoded Data URI.

And that’s it. We have the power to process files client side now!

4 thoughts on “HTML5 Drag, Drop and FileReader in JavaScript

  1. Hi Shree,

    Is it possible to fetch the complete path of file? If yes..pls help because I can see only name, size, type of file in the API.

    Thanks
    Vikash

  2. Hi shree,
    i want to drag 5 images from one container to another container when i drag it they overlap each other.
    And each time i have to declare that image with id in js file.
    Is there any solution to drag and drop these images without knowing there id.

Your thoughts please..