administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon


HTML5 support multi file uploading :) »

FERDY CHRISTANT - JUN 29, 2011 (06:46:44 PM)

I'm currently reading a comprehensive book on HTML5. It was gifted to me and it is quite good. I'll post a review when I am done with it. But there is one aspect that I would like to discuss now: multi file uploading.

I couldn't believe what I read. In HTML5, input fields of type "file" (our good old file upload control) now have an attribute "multiple". When enabled, you can select multiple files.

I read about HTML5 on a daily basis, I follow dozens of design blogs and I've read a book about it before but nowhere have I spotted this feature before. Either I missed it, or this does not get the attention it deserves. Still skeptical about it, I did the simplest test possible:

<form id="test" method="POST" action="test.php" enctype="multipart/form-data">
<input type="file" name="myfiles[]" multiple="multiple" />
<button type="submit">Submit</button>

And what do you know? It works!

For clarity, before, this could not be accomplished without using plugin technology like Flash. You may see Flash-free Ajax file uploaders but those are not true file uploaders. They do not allow you to select multiple files at once.

Where exactly does this work?

I haven't tested so much to check all version numbers but a quick test shows that this works in FF4, Chrome, Safari (not mobile Safari since that does not allow access to the file system), Chrome and Opera. In Redmond they are still thinking what this "web" thing is, so IE is out as allways, even IE9.

You probably can't afford to ignore IE users entirely so the good news is that the upload control will continue to work as a single file control just fine. So, if single file uploading is acceptable for a portion of your audience, this could be an ultra cheap and easy solution to implement multi file uploading.

If single file uploads are not acceptable for your IE audience, the "fix" is so painful that you might as well not bother going the HTML5 upload way. You'd have to go the plugin way again.

Still, to me this is a new option on the table. I will not directly apply it, but it has a strong business case.

Share |

Comments: 2


JUN 29, 2011 - 20:41:57

comment » Ferdy,

You might want to take a look at PLUpload, an open source multiple file uploader that has a great HTML5 implementation using this method. It also has a fallback mechanism to other upload runtimes (Silverlight, Flash and a few others).

The HTML5 runtime also features drag-and-drop.

Implementing it isn't too difficult using the samples provided.

Mark «


JUN 30, 2011 - 11:01:44 AM

comment » @Mark, thanks for the link. Will look into it! «

Was this document useful to you?
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.