HTML5 Drag and Drop File Upload using Canvas


HTML5 Drag and Drop (DnD) File Upload using Drag and Drop API combined with HTML5 File API. Drag and Drop API enables browsers to receive local files from user desktop just by ‘drag‘ and then ‘drop‘. While HTML5 File API enables JavaScript to interact with selected local files before upload to the server. With both of them, we can build a drag and drop file upload interface.

The demo consists of two major parts, an area for drag and drop as well as the upload preview part. The idea is to capture the files uploaded by user whether through drag and drop area or browse button, and then display it in the preview section before upload to the server.

Also, we will using jQuery Template to create image preview wrapper which contains preview of uploaded image, image name, original image size, and final size of image that will upload to the server.

Events Binding

Now, let’s get our hand dirty with some jQuery coding. The first thing that we are going to do is to bind the Drag and Drop events to our #droparea element. There are a number of drag events, but we will use only dragover, dragleave, and drop events.

Not only drag and drop area, instead we will create a ‘browse’ button as well. But we don’t want to use native browser file upload button, so here is a little trick for this.

The best practice of using new HTML5 objects is to check for object availability before using it, else simply skips the function or show a fallback plan if any.

The FileReader Object

Next, we will read the content of uploaded file through FileReader object which allows browser asynchronously to read files from user desktop.

Once the reader is loaded, we can bind the uploaded image (in Base64-encoded) to <img> tag through After that, we will use it to draw a canvas image so that we can modify it with JavaScript before proceed to the server. This definitely will save the bandwidth compare to process it at server side.


Canvas Image

We can resize the image as well as apply different filters to our canvas image. However I won’t cover them here, still, you can grab them from the source files. When the canvas image was drawn, convert it to file URL format through toDataURL method and attach it to jQuery Template.

jQuery Template

When we have everything we need, simply bind them to jQuery Template and append to our #result element.

There is a need of converting newURL (in DataURI format) to Blob so that we can access it’s attributes like file size or file type whether from client side or server side.

For dataURItoBlob function, you might found them in script.js file inside source files.

Upload To Server

Last but not least, we can upload the new image to our server through jQuery AJAX.

The File Upload PHP Script

Though this is not a complete PHP upload script, but hope this will helps you get to know how it works inside the back end code.


Leave A Reply

Your email address will not be published.