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.


Features: 
       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).

References:

  1. https://developer.mozilla.org/en/Using_files_from_web_applications
  2. http://hacks.mozilla.org/2010/05/formdata-interface-coming-to-firefox/
  3. https://github.com/francois2metz/html5-formdata 
  4. http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input


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

4 comments:

  1. Even html5 reduce the need for proprietary plug-in-based rich internet application (RIA) technologies its really cool to deal with it.

    ReplyDelete
  2. wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, Html5 online trainingamong the Html5 in Hyderabad. Classroom Training in Hyderabad India

    ReplyDelete
  3. You have clearly explained about the process thus it is very much interesting and i got more information from your blog.For more details please check our website.

    Oracle Fusion Training Institute

    ReplyDelete
  4. CALFRE handles oracle fusion financials online training and its modules maintaining classroom based training with the self-paced videos. An expert having ten plus years of self-experience handles the training period through online and explains each and every point perfectly. We recently launched our institute in the USA and getting the best reputation over there.


    Oracle fusion Financials Online Training

    Oracle Fusion Financials online Training

    ReplyDelete