Wednesday, February 29, 2012

File Uploading using AJAX on HTML5 browsers

        I did a sample on File upload operation using AJAX with the help of features provided by the latest HTML5 browsers. Prior to Html5, we used workarounds like, Hidden IFrame with target attribute on Form tag to simulate the Async file upload.
I started by refering some sites, firstly, Mozilla developer network. Did a basic sample, but when I tested it in Opera, it didn't work. When i checked the js error, it seems Opera doesn't support the  FormData() JavaScript object. I searched for a fix and got FormData.js library, when i tried with it, I got no success. I dug up into the code and found a way to allow this sample work in Opera. The FormData.js code has getAsBinary() object, which is deprecated as per MDN, so i have used FileReader() object to fix it. And because of this fix, progress bar control not works in Opera.
        As per MDN, FileReader() is less performant, since it is mainly used in file manipulation at client side.

Screenshot before file uploading
Screenshot after file selection

Screenshot after file upload success

       For this sample i have used Asp.Net at server side. Depending on the server settings, big files may not be accepted, try with small files. Find the code for download below.

       Hidden Fileupload control, textbox with default text & clickable, selected file remove option,
 progressbar control, javascript code fix for Opera, serverside delay simulation.

       Tested with latest browsers: FireFox, Chrome, Opera.(not tested in Safari, may not work in IE9).



Download link:
       Zip file hosted in Opera. download from here.