Multiple File Upload Input
More often than not, I find myself wanting to upload more than one file at a time. Having to use multiple "file" INPUT elements is annoying, slow, and inefficient. And if I hate them, I can't imagine how annoyed my users would be. Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element.
The HTML
<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> <form method="post" action="upload-page.php" enctype="multipart/form-data"> <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> </form>
Simply adding the multiple attribute allows for multiple files to be uploaded via one INPUT element. If you're a stickler for validation, you'll want to assign the multiple attribute a value of multiple.
Listing Multiple Files with JavaScript
//get the input and UL list
var input = document.getElementById('filesToUpload');
var list = document.getElementById('fileList');
//empty list for now...
while (list.hasChildNodes()) {
list.removeChild(ul.firstChild);
}
//for every file...
for (var x = 0; x < input.files.length; x++) {
//add to list
var li = document.createElement('li');
li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name;
list.append(li);
}
The input.files property provides an array of files for which you can check the length; if there's a length, you can loop through each file and access the file paths and names.
Receiving and Handling Files with PHP
if(count($_FILES['uploads']['filesToUpload'])) {
foreach ($_FILES['uploads']['filesToUpload'] as $file) {
//do your upload stuff here
echo $file;
}
}
PHP creates an array of the files uploaded with the given INPUT's name. This variable will always be an array within PHP.
Of course, you could a Flash-based equivalent for Internet Explorer and Opera, but having to add and support another component can be taxing. Hopefully these browsers add support for multiple file uploads soon!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Great thanks! I am always running into this problem project after project. I have been using http://www.uploadify.com/demo/ for IE users (flash alternative), it’s very easy to implement and customise (event handlers etc).
This is the only reason I ever use flash on a page. The lack of progress sadly still means it is needed, but I don’t see that being fixed anytime soon.
Awesome! Thanks for sharing this little gem! It would make a welcome addition to certain modules in our in-house CMS.
didn’t work in last opera
Doesn’t work in IE(8) or Opera. It would be helpful if you would add what browsers your tips work in, some Googler might find this page and later down the troubleshooting line get confused when it doesn’t work in a different browser.
fuck, nice! i dont know about this, because I use opera always! ;)
@Andy: Did you read the post? “Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element.”
Please read the post next time.
Thanks David.
This problem with upload arises from project to project. In my last project I tried http://www.aurigma.com/Products/ImageUploaderFlash/, it worked good enough with all browsers.
The usual comments from people who don’t read a post (i.e. Dr Death and Andy).
Not only do you say “Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element” but at the end you also say “Of course, you could a Flash-based equivalent for Internet Explorer and Opera, but having to add and support another component can be taxing. Hopefully these browsers add support for multiple file uploads soon!”
I’m not sure how this at all confusing about the current state of browser support…
The usual comments from people who don’t know how to read a post (i.e. Dr Death and Andy).
Not only do you (David) say “Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element” but at the end you also say “Of course, you could a Flash-based equivalent for Internet Explorer and Opera, but having to add and support another component can be taxing. Hopefully these browsers add support for multiple file uploads soon!”
I’m not sure how this at all confusing about the current state of browser support…
Hey David, can you delete this one, and my first (or second) comment.., Something went wrong when posting (took ages) and I posted the comment again and they both ended up on this page. Thanks!
AWSUM!!
It would be nice to find out a way to implement an uploading bar, to show the progress. ;)
Way cool. Thanks David. Would be super excellent to combine this capability with the capabilities of this script (http://the-stickman.com/files/mootools/multiupload/) in terms of removing the files from the queue of files to upload…
This multiple upload thing should be a must-have-feature in modern browsers!
Pretty cool, I wonder how long until ‘The Other’ browser implements something like this. Being limited to a single file per INPUT is a pain in the arse, and while the Flash alternatives solve the problem, I do not like having to use Flash to resolve a problem that shouldn’t of existed in the first place..but oh well, it’s the standard.
Thanks for the heads up David!
Thanks David,
I’m going to add this feature to our web-apps it’s great. Next one is web-browser based drop-box’s straight from the desktop.
Great article!
Just wanted to mention: if you’re working with an XHTML doctype, then you’ll need to use multiple=”multiple”. Otherwise, multiple by itself will work. Same rule applies to all boolean attributes.
Hi nice article.
Thanks
Addy
cannot believe this is possible I tried everything, especiallly the Flash is awfull with loosing its session in everything but IE.
Thank you for sharing, If it works , I will take you out in Amsterdam till you drop, I mean it !
If you are an Opera user, you can use this
Opera has had it since Opera 6
Just need to check their user agent and display the right one. A pain, but still doable.
Ok…Lets try that again lol
Just put in the opening and closing html tags
input type=”file” name=”filesToUpload[]” id=”filesToUpload[]” min=”1″ max=”9999″ /
Google docs has added new upload feature. It uses multiple file input and also works in IE eventhough have disabled flash. How did they manage it to work in IE?
Please David, Can you share the complete code of this example? :D
Thanks