jQuery file upload maxNumberOfFiles and getNumberOfFiles options

Question

I am using jQuery file upload and setting maxNumberOfFiles to 1. However, it is allowing more than one file at a time. The documentation states...

The maxNumberOfFiles option depends on the getNumberOfFiles option, which is defined by the UI and AngularJS implementations.

There is no further documentation on the subject. getNumberOfFiles is just a function you can pass in.

Here is what I have...

$('#fileupload').fileupload({
                maxNumberOfFiles: 1,
                getNumberOfFiles: function () { return 1 }
});

Does anyone have the maxNumberOfFiles option working?

Answer 1

I believe getNumberOfFiles was only added as an option to a recent version of jquery.fileupload-ui.js (8.2.1).

As an alternative, you can set the option singleFileUploads to false, and in the add callback you can throw errors if more than one file is added.

var maxFiles = 1;
$('#fileupload').fileupload({
    singleFileUploads: false,
    url: '/uploadUrl'
}).bind('fileuploadadd', function (e, data) {
        var fileCount = data.files.length;
        if (fileCount > maxFiles) {
            alert("The max number of files is "+maxFiles);
            return false; 
        }
    });

Answer 2

I found just using a simple counter works well enough

var maxFiles = 1;
var counter=0;
$('#fileupload').fileupload({
url: '/uploadUrl',
add: function (e, data) {
        if(counter < maxFiles){
            counter++;
  }else return false;

    }
});