09
Jul
2011

Html5 Multiple File Uploading

i got a bit of messing around lately with html and found this great new features to XMLHttpRequest object.
now you can use it to send files and get their progress using javascript ! for all of us this is a great improvment , cause we don’t to use flash / silverlight / java anymore to get a neat progress bar for file upload.
of course there are great solutions (swfupload / uploadify etc) that hides the flash and mimics the whole process , but it not native to the browser …

so the uploader is wrapped as a class named .. you can guess Html5Uploader,
for ease of writing i used jquery – mainly for the selectors and event handling , but it can easily removed by anyone with a bit of javascript knowledge.

so in order to get it up & running create a new html5uploader object using such line :

var uploader = new Html5Uploader({ mimeTypes: “image/jpeg,image/gif,image/png,image/x-png,image/bmp”, queueSizeLimit: 10, fileInputId: ‘filesToUpload’ });
events thrown from the class :

onErrorAddingFile with an error object
onCancel – once a file is removed from queue
onAddedToQueue – once a file being added to queue (here you can write your own html)
onUploadStarted – for each file
onAllComplete – self explained i guess
onProgress – for file upload
onComplete – for each file
onError – on error while uploading.

you can download the demo from this link : html5 multiple file upload source

in the zip file you will find a .net solution with all the files (css/js/ashx) – the upload handler is a .net handler, you can modify one of my previous php upload handlers for this cause if you want to use php as your backend

and view an online demo @ html5 multiple file upload demo

right now chrome and firefox >4 supports html5 uploading, ie – not yet.

if you find this usefull , have any comments – please share with me, it’s nice to listen to my audience :)

Have a good one,

Ady

Posted in ASP.NET, html5, javascript

8 comments »

  1. Rich said,
    July 10, 2011 @ 6:29 am

    The ‘browse’ button is not working for me.

    Firefox 3.6.8 on Ubuntu Lucid

  2. Jay said,
    July 31, 2011 @ 10:12 pm

    Ady, do you do freelance? I can’t seem to find a way to contact you through your site.

  3. Ajmer said,
    August 16, 2011 @ 11:41 pm

    Ady

    Hi, can you please supply the PHP handler for the HTML5 File Uploader function. Its simple and ease of use is ideal for my web site and it is fairly difficult for me to try and develop the handler.

    thanks

  4. Owen said,
    August 23, 2011 @ 10:57 pm

    Hey, I have been looking for an html5 version of an Uploader to lay over my flash Uploadify solution. This is great. Is this Commons or MIT License?

  5. kiran said,
    September 8, 2011 @ 7:44 pm

    Hi Ady,

    I am really impressed with this but I have small queries regarding this how do I Use Oncomplete event and other events as you mentioned above.As I need to display Images which have uploaded and need to resize them and give them some nice Lightbox effect.I will be grateful to you If you give me suggestions.

  6. admin said,
    September 19, 2011 @ 8:34 pm

    @Ajmer – i don’t have time to write a php file that will do that trick, you can have a look somewhere in the site there is a flash uploader that have a php handler, it might need few tweeks.

    @Owen – didn’t gave it much thought , i guess MIT will suit, and a link back with credits :)

    @Kiran – you can pass any data you want from the ashx handler to the onComplete event,
    then just use something like response.imageUrl and pass it to your lightbox.

  7. Kiran said,
    October 15, 2011 @ 9:56 pm

    Hi Ady,
    Thanks for your reply and got it work and I would like to see working with IE 8.

    And keep rocking and many more articles to see from you.
    Have a nice day!

  8. nick frimson said,
    October 22, 2011 @ 2:11 am

    Ady!

    can you help me, i am a bit of a novice when it comes to anything more than simple HTML and CSS coding. I have downloaded your files and implemented them into my site design, and it all looks great, the browse function works fine, but i can’t figure out how to edit the .net file to upload the files to my server. I know this is not a simple answer, but perhaps you could point me to a tutorial online or something i can dive into myself? i just don’t even know where to start!

    also..is it possible to allow the upload of pdf and zip files?

    thanks SO much, i would really really appreciate your help!

    i can send you a link to what i have done so far.

    thanks!
    nick

Leave a Comment