Learning jQuery

Gmail style file upload is quite a good feature. You can easily drag the file from your system and drop it on the uploader and file gets uploaded. In this post, I will show you a jQuery plugin which can be integrated with ASP.NET application and which allows uploading like Gmail style.

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system Gmail into your web app. You only need to create a dropbox element (i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. It also works with the multiple input file element.

The upload function is divided into two asynchronous operations: client side, the file is loaded in the browser memory with a FileReader object. Useful if you want, for example, to show the image preview while uploading a picture. The server side operation consists in sending the binary file string to the postUrl. It has been tested and works on Firefox and Chrome.

How to use it?

$(document).ready(function() {
  $("#dropbox").html5Uploader({
      name: "foo",
      postUrl: "Upload.aspx" 
  });
});

<div id="dropbox"></div>
<input id="multiple" type="file" multiple>

Available Options:

• name: upload field identifier.
• postUrl: the url to post the file data.
• onClientAbort: Called when the read operation is aborted.
• onClientError: Called when an error occurs.
• onClientLoad: Called when the read operation is successfully completed.
• onClientLoadEnd: Called when the read is completed, whether successful or not. This is called after either onload or onerror.
• onClientLoadStart: Called when reading the data is about to begin.
• onClientProgress: Called periodically while the data is being read.
• onServerAbort: Called when the post operation is aborted.
• onServerError: Called when an error occurs.
• onServerLoad: Called when the post operation is successfully completed.
• onServerLoadStart: Called when posting the data is about to begin.
• onServerProgress: Called periodically while the data is being posted.
• onServerReadyStateChange: A JavaScript function object that is called whenever the readyState attribute changes. The callback is called from the user interface thread.
• onSuccess: Called when the post operation is successfully completed, the ReadyState is 4 and the HttpStatus is 200. Useful to get back informations from the server.

Feel free to contact me for any help related to jQuery, I will gladly help you.