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.


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

  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

  3. This is both interesting and relevant. We see this sort of thing regularly. You are doing a great job.

    We Have a Top Rated CALFRE Search Engine to search about all different courses in Al Karama, Dubai Locations. For Example Search a course like Oracle ASCP Training in Location Dubai Know More Click Here


  4. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. Your write up is a fine example of it.

    Best Oracle Fusion HCM Training Institutes in Hyderabad

  5. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information.
    Oracle R12 Financials Training in Hyderabad

  6. Thank you for sharing your awesome and valuable article this is the best blog for the students they can also learn.

    Workday Online Training

  7. Really excellent information and thank you for giving your valuable information

    Workday HCM Online Training

  8. It's Incredibly grand. Really very helpful article , Thank you for sharing

    Workday Online Training