What Is The Max Number of Files to Select in an HTML5 [Multiple] File Input

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

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.

HTML5: What is the max number of files that can be selected on input type =file /

It looks like the spec doesn't define a finite number of files you can select at once. Some implementations may have some maximum, but I wasn't able to easily find one in the source code of Chromium.

Of course, you may still be restricted by other factors, including the server's maximum payload size, and the time that it would take to upload the files on whichever network connection your users have.

Also, note that you can just use multiple as an attribute, without multiple="".

How to limit the maximum files chosen when using multiple file input

You could run some jQuery client-side validation to check:

$(function(){
    $("input[type='submit']").click(function(){
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length)>2){
         alert("You can only upload a maximum of 2 files");
        }
    });    
});

http://jsfiddle.net/Curt/u4NuH/

But remember to check on the server side too as client-side validation can be bypassed quite easily.

limit number of file in file input html5 (js) and multi field inside same page

Maybe this answers your question: https://www.tutorialspoint.com/How-to-limit-maximum-items-on-multiple-input-input-type-file-multiple

Here is a little working snippet generated along those lines. I take the maximum allowed numbers of files from the data-max attribute of each individual input element.

Edit:
I now trigger the file-count-check by the change event of each file input (I use "delegated binding", i. e. the listener is attached to the parent <form> element). Depending on whether the maximum number is exceeded I disable the submit-button.

const btn=document.querySelector('input[type=submit]');document.querySelector('form').addEventListener('change',function(ev){ if(ev.target.type=='file'){  // I collect the inps here to allow for dynamic pages (varying number of inputs):  const inps=[...document.querySelectorAll('input[type=file]')];  btn.disabled=inps.some(inp=>{ // check whether the condition has been violated at least once    if (inp.files.length>inp.dataset.max){ // show warning for first violation      console.log(`You are only allowed to upload a maximum of ${inp.dataset.max} files for ${inp.name}!`);      return true;    }  }) }});

<html>   <head>      <title>HTML file upload</title>   </head>   <body>      <form>         <input type="file" name="files1[]" accept=".pdf" multiple data-max="2"><br/>         <input type="file" name="files2[]" accept=".pdf" multiple data-max="3"><br/><br/>         Upload multiple files, and click Submit.<br>         <input type="submit" value = "submit">      </form>   </body></html>

HTML input type=file too many files in Chrome?

It looks like it's not working because the upload is limited by the total number of characters in all of the file names combined. The limit seems to be about 32K characters.

See these:

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

https://bugs.chromium.org/p/chromium/issues/detail?id=44068

How to select multiple files with input type=file?

New answer:

In HTML5 you can add the multiple attribute to select more than 1 file.

<input type="file" name="filefield" multiple="multiple">

Old answer:

You can only select 1 file per <input type="file" />. If you want to
send multiple files you will have to use multiple input tags or use
Flash or Silverlight.

How can restrict user to upload max 10 files at once?

<input id="files" type="file" name="files[]" multiple="multiple" onchange="checkFiles(this.files)">

function checkFiles(files) {       
    if(files.length>10) {
        alert("length exceeded; files have been truncated");

        let list = new DataTransfer;
        for(let i=0; i<10; i++)
           list.items.add(files[i]) 

        document.getElementById('files').files = list.files
    }       
}

This function will not allow to select files more than 10.

Count and limit the number of files uploaded (HTML file input)

You can implement a javascript solution to check the number of files that have been selected, which you can then use to forbid uploading to the server. There are really only going to be client-side solutions to this problem though, as there is really nothing stopping a user from posting these files to your php script anyway. You can specify a maximum upload size limit, but it isn't specific to the number of files that are being uploaded.

Your best bet is to implement some javascript checking, specifying a reasonable maximum upload size for your http server (or in PHP), and then ignoring any file uploaded if it exceeds your maximum count.

Read about the HTML5 File API here to restrict the count of selected files: http://dev.w3.org/2006/webapi/FileAPI/

Here is the php.ini docs which explain how to make a size limitation on uploads: http://php.net/manual/en/ini.core.php

As was suggested in the comments, check out: http://php.net/manual/en/ini.core.php#ini.max-file-uploads

What Is The Max Number of Files to Select in an HTML5 [Multiple] File Input