1

I can not seem to limit to on the number of files that can be upload. https://github.com/blueimp/jQuery-File-Upload/wiki/Options

I use the drag and drop method, and the method to search the browser. In the wiki, I read that it was necessary to use the "maxNumberOfFiles" option and delete the "multiple" attribute but it does not change, it is always possible to drop multiple files. In addition to the code I can not find information on "maxNumberOfFiles" option.

script

var dropZonebox = $('#dropzone');
$('#fileupload').fileupload({
    url: fund_upload_url,
    dataType: 'json',   
    dropZone: dropZonebox,
    maxNumberOfFiles: 1
});

4 Answers 4

3

I had the same problem and finally went with this :

Set singleFileUploads to false : This ensure that if the user drops 3 files, add will not be called 3 times with one file but 1 time with three files.

Then you can handle yourself the number of file in the add parameter.

Here is what I did to have a little effect if more than one file is dropped (a blinking red background in the dropzone):

$('.fileToUpload').each(function () { // Multiple input file
    $(this).fileupload({
        url: '...',
        dataType: 'json',
        dropZone: $(this),
        singleFileUploads: false,
        add: function (e, data) {
            var targetName = data.paramName;
            $('#'+targetName+'Dropzone').removeClass('hover');
            if (data.files.length > 1) {
                $('#'+targetName+'Dropzone').addClass('dropzone-error');
                setTimeout("$('#"+targetName+"Dropzone').removeClass('dropzone-error')",300);
                return;
            }
            var jqXHR = data.submit(); // Catching the upload process of every file
            $('#'+targetName+'Cancel').on('click',function(e){
                  jqXHR.abort();
            });
        },
        ...
2

I followed what Irvin Dominin said, but still not working even I insert jquery.fileupload-ui.js.

After debugging I found out that getNumberOfFiles is not working because of the order these two files. jquery.fileupload-validate.js and jquery.fileupload-ui.js

After put jquery.fileupload-ui.js file right after jquery.fileupload-validate.js solved my case.

Hope it will work for people who have the same problem.

0

I think the issue is in the getNumberOfFiles implementation:

The maxNumberOfFiles option depends on the getNumberOfFiles option, which is defined by the UI and AngularJS implementations. https://github.com/blueimp/jQuery-File-Upload/wiki/Options#maxnumberoffiles

If you are not using the UI or AngularJS versions, you will have to implement getNumberOfFiles as a function which returns the current number of files, example: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-ui.js#L73

1
  • Thanks for your help. Have i to add jquery.fileupload-ui.js? Apr 27, 2014 at 10:47
-1

I found using a simple counter worked for me

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.