multiple file input in Firefox 3.6

Firefox 3.6 supports multiple file input. This new capability allows you to get several files as input at once, using standard technologies. This is a big improvement, since you used to be constrained to one file at a time, or needed to use a third party (proprietary) application. This will be particularly useful, for example, for photo uploads.

The input tag

To let your user select a local file, use the input tag on your Web page. This will show the file picker to the user:

<input type="file"/>

In Firefox 3.6, the input tag has been expanded to support multiple files:

<input type="file" multiple=""/>

The user will still see the same file picker, but will be able to select more than one file.

The form tag

You can still use the classic form mechanism:

<form method="post" action="upload.php" enctype="multipart/form-data">
  <input name='uploads[]' type="file" multiple=""/>
  <input type="submit" value="Send">

If the server side code is in PHP, don’t forget to make sure that the value of the name attribute has brackets. The brackets are not from the HTML specification, but are required to manipulate the result of the request as an array (see PHP documentation).

Here’s an example, which goes through the file list and prints each file name:

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';

Using File API

Firefox 3.6 also supports FileAPI. This allows you to do extra processing on the client slide before sending the files to the server. You can access the selected files with the files property of the input DOM element and then manipulate the files using the FileAPI.

For example, here’s how to get the name of each file selected by the user. This is done on the client side, unlike the previous PHP example.

  var input = document.querySelector("input[type='file']");
  // You've selected input.files.length files
  for (var i = 0; i < input.files.length; i++) {
    // input.files[i] is a file object
    var li = document.createElement("li");
    li.innerHTML = input.files[i].name;


See this mechanism in action in our multiple file input demo. You’ll need Firefox 3.6 (beta).


To learn more about multiple file input, check out the documentation on MDC.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Drazick

    This is great!
    Hopefully Gmail will use it shortly.

    We want FF 3.6 already :-).

    December 10th, 2009 at 14:37
  2. ben

    Can’t wait. This is fantastic!

    December 10th, 2009 at 15:10
  3. Aryeh Gregor

    multiple=”true” is invalid HTML5. You want either multiple=”multiple” or multiple=””, or (if using the HTML serialization) just plain multiple. See for yourself:!DOCTYPE+html%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cform%3E%3Cinput+type%3D%22file%22+multiple%3D%22true%22%3E%3C%2Fform%3E

    This is valid, though:!DOCTYPE+html%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cform%3E%3Cinput+type%3Dfile+multiple%3E%3C%2Fform%3E

    I pointed this out on the W3C FileAPI post yesterday, too, but it seems my comment hasn’t been approved. Mozilla shouldn’t be encouraging invalid HTML — if people see multiple=”true” used, they’ll expect that multiple=”false” does what they expect, which it doesn’t (it’s treated exactly the same as multiple=”true”).

    December 10th, 2009 at 15:31
  4. Jason

    This is a great feature! Will this downgrade gracefully on other browsers?

    I think I’ll do some testing and write about it. :D

    December 10th, 2009 at 15:32
  5. Arc

    You could detect whether ‘multiple’ are supported with JavaScript and if it isn’t go with the old approach of allowing multiple file input fields instead.
    input = createElement(‘input’)
    input.type = ‘file’ = ‘file[]’

    December 10th, 2009 at 16:13
  6. Arun Ranganathan

    @Aryeh, you’re totally right. I’m not sure why your comment didn’t get approved, but I’ve fixed the text of the File API article. Thanks for the comment :-)

    December 10th, 2009 at 17:05
  7. Jose

    We’ve just implemented this for our internal site and, since for the time being it is only to be used by ourselves, we had no problem updating everyone to FF 3.6.

    We quickly wanted to improve our internal system to allow multiple files on the other direction, downloading, but without zipping them first. It seems that’s not possible?

    December 10th, 2009 at 17:33
  8. paul

    @Aryeh, you’re right. I’ve updated this post.

    December 10th, 2009 at 17:35
  9. ben

    @Aryeh Great catch.

    December 10th, 2009 at 18:51
  10. […] a previous post, we showed you how to upload several files using the input element. In Firefox 3.6, you can let […]

    December 14th, 2009 at 12:37
  11. […] previous posts, we showed how to access a file through the input tag or through the Drag and Drop mechanism. In both cases, you can use XMLHttpRequest to upload the […]

    December 15th, 2009 at 11:01
  12. K

    You could use event.dataTransfer.setData to add a link list and allow the file manager to handle the downloading.

    December 17th, 2009 at 01:14
  13. Chris

    It looks very nice.. but it seems to me that more inputs are a little more userfriendly…

    How would you select files from different directories?

    January 7th, 2010 at 21:51
  14. […] koennen per Drag & Drop auf Seiten hochgeladen werden. Siehe […]

    January 21st, 2010 at 12:00
  15. jpvincent

    happy seeing HTML5 features being implemented one after the other by Mozilla, webkit and opera.
    but as web developer, I can only wait for one of the major JS library maker (jQuery, YUI …) to make something that would deal with differences across browsers due to HTML5 specs not being fixed, and to also deal with older browsers to propose a fallback solution (in the case of multi upload, Flash uploaders are the only candidates)

    Dont’t you think that the only way for the entire web to benefit from the new features now is to help the JS libraries makers ?
    more arguments in this post (in french) :

    January 22nd, 2010 at 14:29
  16. […] Mozilla) […]

    January 24th, 2010 at 04:36
  17. Nitin Reddy Katkam

    The implementation in Firefox 3.6 enables the user to select multiple files only when they are located within the same directory (using shift or control within the file open dialog). Is there any way a user can select files from multiple directories?

    January 24th, 2010 at 04:38
  18. […] – 3.6 – the best browser (for my opinion). I read that in this version it supported multiple files upload. So I add a patch for Joomla (1.5) to support it. This patch make the upload native php-html and […]

    January 27th, 2010 at 13:55
  19. […] 원본: […]

    May 17th, 2010 at 05:02
  20. Rafael

    There seems to be no way to remove files from the FileList object. The delete operator doesn’t seem to remove individual properties (i.e. files, named 0, 1, etc in the object) from it because it is read-only (as mentioned in the spec: This is a fairly major drawback, as the user might want to remove one or two files from the list before uploading the desired ones.

    June 23rd, 2010 at 15:55
  21. dima

    but as a download. to make it work on all browsers? including IE?

    July 31st, 2010 at 20:16
  22. pd

    Anyone have a clue how to process an input type=file multiple=true tag on the server-side using Perl?

    August 10th, 2010 at 03:22
    1. Glen

      Yes, just access your uploaded file in list context instead of scalar, and you will get a list of file handles. Example:

      my $q = new CGI;

      my @filehandles = $q->upload(‘files’);

      Now you can loop through your filehandles to process each file, this works if the user selects 1 or multiple files.

      Note: Here is a snippet of what your html to support this should look like:

      March 1st, 2011 at 10:14
  23. eric

    You can upload multiple files to multiple file hosting sites (into your account) in .
    Just try it.

    August 28th, 2010 at 12:26
  24. […] are also automatically validated. By passing the multiple attribute (also valid on type=”file”), you can also validate a list of mails separated by commas. <input type="email" […]

    November 11th, 2010 at 10:21
  25. […] A noter que Flickr utilise encore un module en Flash pour permettre la sélection multiples de fichiers, alors quel la plupart des navigateurs modernes proposent l’envoi multiples de fichiers. […]

    April 4th, 2011 at 13:18
  26. Tim

    I can’t figure out how to move it. I can get the simple php code to work but supplying move_uploaded_file($_FILES[‘uploads’][‘tmp_name’], $_FILES[‘uploads’][‘name’]); does not work.

    August 29th, 2011 at 14:11
  27. iSodaPH

    how do you get the file path?

    December 29th, 2011 at 00:12

Comments are closed for this article.