Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the max number of files to select in an HTML5 [multiple] file input?

I have 64000 small images I want to upload to my website (using existing validation, so no FTP etc). I've created an HTML5 [multiple] type=file input for this a while back to be used for a hundred or hundreds of images. Hundreds is not a problem. The images are batched and sent to the server.

But when I select a folder of ~ 16000 images, the file input's FileList is empty... The onchange event triggers, but the file list is empty. The browser (or file system or OS?) seems to have a problem selecting this many files.

I've created a very small tool to help determine what could be the max: http://jsfiddle.net/rudiedirkx/Ehhk5/1/show/

$inp.onchange = function(e) {
    var l = 0, b = 0;
    for (var i=0, F=this.files, L=F.length; i<L; i++) {
        l += F[i].name.length;
        b += F[i].size;
    }
    $nf.innerHTML += this.files.length + ' files: ' + (b/1000/1000) + ' MB / ' + l + ' chars of filename<br>';
};

All it does is count:

  • the number of files
  • the number of characters all file names are combined
  • the number of MB of total file size

When I try this, I get as very most:

1272 files: 176.053987 MB / 31469 chars of filename

(On 32 & 64 bit Win7, Chrome 26-52)

The next image (which fails) would be:

  • 1273 images, which is not an obvious cut-off
  • between 176 and 177 MB filesize, also not an obvious cut-off
  • less than 32000 chars of filenames, also not an obvious cut-off, although it sort-of maybe looks like 32k...

In my calc, 1 MB = 1000^2 Bytes, not 1024^2. (That would be a MiB, but maybe my OS/filesystem/browser disagrees.)

My question would be: why this many files? Why this max? Is it OS dependent or browser dependent? Where do I find the specs for that? Is it JS' fault? Search for "file input max files" et al only results into the [max] attribute, which is irrelevant.

More test results:

  • In Firefox the max seems to be much higher. At least "2343 files: 310.66553999999996 MB / 60748 chars of filename" (that's all the files I have right here)
  • In Firefox also: "16686 files: 55.144415 MB / 146224 chars of filename" (much smaller, but more files)

Update

  • Chrome 52 canary Windows is still 32k of file name
  • Firefox (44+) Windows is still unlimited
like image 555
Rudie Avatar asked Apr 06 '13 13:04

Rudie


People also ask

How do you limit the maximum file selected when using multiple inputs?

For limiting maximum items on multiple inputs, use JavaScript. Through this, limit the number of files to be uploaded. For example, let's say only 2 files to be uploaded at once. You can try to run the following code to learn how to use multiple attributes in HTML.

How do you select multiple files in HTML?

Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting.

How do I select multiple files to upload?

Click on one of the files or folders you want to select. Hold down the command or shift key. Click on files or folders that you want to select while holding the command or shift key. Continue to hold down the command or shift key until you select all the files you want.

How do I limit the file type in HTML?

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples: accept="image/png" or accept=".png" — Accepts PNG files. accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.


1 Answers

why this many files?

The number of files depends on the number of characters all file names are combined.

Why this max?

In the Windows API, the maximum path length limitation is 256 chars, the Unicode version API is 32,767 chars.

Chrome simply sets the max path length of the Unicode version API, so it's about 32k chars as you observed.
Check this fix: https://code.google.com/p/chromium/issues/detail?id=44068

Firefox dynamically allocates a buffer big enough to hold the size of multiple selected files, which could handle much larger path length.
Check this fix: https://bugzilla.mozilla.org/show_bug.cgi?id=660833

Is it OS dependent or browser dependent?

Both.

Where do I find the specs for that?

For Windows API usage and reference:
http://msdn.microsoft.com/en-us/library/aa365247.aspx (Maximum Path Length Limitation)
http://msdn.microsoft.com/en-us/library/ms646839(VS.85).aspx

Is it JS' fault?

No.

like image 136
kelviN Avatar answered Sep 27 '22 22:09

kelviN