Mozilla

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">
</form>

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;
    ul.appendChild(li);
  }

Demo

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

Documentation

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

28 comments

Comments are now closed.

  1. Drazick wrote on December 10th, 2009 at 14:37:

    This is great!
    Hopefully Gmail will use it shortly.

    We want FF 3.6 already :-).

  2. ben wrote on December 10th, 2009 at 15:10:

    Can’t wait. This is fantastic!

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

    multiple=”true” is invalid HTML5. You want either multiple=”multiple” or multiple=”", or (if using the HTML serialization) just plain multiple. See for yourself:

    http://validator.nu/?doc=data%3Atext%2Fhtml%2C%3C!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:

    http://validator.nu/?doc=data%3Atext%2Fhtml%2C%3C!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”).

  4. Jason wrote on December 10th, 2009 at 15:32:

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

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

  5. Arc wrote on December 10th, 2009 at 16:13:

    @Jason
    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’
    input.name = ‘file[]‘
    fieldset.appendChild(input)

  6. Arun Ranganathan wrote on December 10th, 2009 at 17:05:

    @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 :-)

  7. Jose wrote on December 10th, 2009 at 17:33:

    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?

  8. paul wrote on December 10th, 2009 at 17:35:

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

  9. ben wrote on December 10th, 2009 at 18:51:

    @Aryeh Great catch.

  10. Pingback from file drag and drop in Firefox 3.6 at hacks.mozilla.org on December 14th, 2009 at 12:37:

    [...] a previous post, we showed you how to upload several files using the input element. In Firefox 3.6, you can let [...]

  11. Pingback from interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest at hacks.mozilla.org on December 15th, 2009 at 11:01:

    [...] 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 [...]

  12. K wrote on December 17th, 2009 at 01:14:

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

  13. Chris wrote on January 7th, 2010 at 21:51:

    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?

  14. Pingback from Firefox 3.6 | FOX21.at: Free Software, Freeware, Perl, PHP, MySQL, Scripts, HOWTO, Gentoo Linux, IP2Location, Location2IP on January 21st, 2010 at 12:00:

    [...] koennen per Drag & Drop auf Seiten hochgeladen werden. Siehe [...]

  15. jpvincent wrote on January 22nd, 2010 at 14:29:

    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) :
    http://jpv.typepad.com/blog/2010/01/features-html5-appel-aux-armes-pour-les-librairies-js.html

  16. Pingback from Nitin Katkam » Multiple file input in Firefox 3.6 on January 24th, 2010 at 04:36:

    [...] Mozilla) [...]

  17. Nitin Reddy Katkam wrote on January 24th, 2010 at 04:38:

    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?

  18. Pingback from How to make Joomla upload multiple files « oc666 zone on January 27th, 2010 at 13:55:

    [...] – 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 [...]

  19. Pingback from Firefox 3.6에서 다중 파일 input 태그 ✩ Mozilla 웹 기술 블로그 on May 17th, 2010 at 05:02:

    [...] 원본: http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/ [...]

  20. Rafael wrote on June 23rd, 2010 at 15:55:

    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: http://www.w3.org/TR/FileAPI/#dfn-filelist). 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.

  21. dima wrote on July 31st, 2010 at 20:16:

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

  22. pd wrote on August 10th, 2010 at 03:22:

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

    1. Glen wrote on March 1st, 2011 at 10:14:

      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:

  23. eric wrote on August 28th, 2010 at 12:26:

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

  24. Pingback from Firefox 4: HTML5 Forms ✩ Mozilla Hacks – the Web developer blog on November 11th, 2010 at 10:21:

    [...] 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" [...]

  25. Pingback from Bug du sélecteur de fichiers dans Gnome/GTK avec Flickr « Antoine Turmel on April 4th, 2011 at 13:18:

    [...] 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. [...]

  26. Tim wrote on August 29th, 2011 at 14:11:

    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.

  27. iSodaPH wrote on December 29th, 2011 at 00:12:

    how do you get the file path?

Comments are closed for this article.