jquery file upload alert on maxNumberOfFiles

Question

I am using jQuery File Upload plugin (http://blueimp.github.io/jQuery-File-Upload/) for image upload for my website.

My Code:

$('#fileupload').fileupload({
    url: 'server/index.php',
    dataType: 'json',
    dropZone: $('#dropzone'),
    disableImageResize: false,
    imageMaxWidth: 800,
    imageMaxHeight: 800,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxNumberOfFiles:3,
    singleFileUploads: false,
});

When user try to upload more than 3 files, the script does prevent files from being uploaded. But it doesn't do anything or show anything to tell user that their files is over limit.

So, how can I have the plugin to display an alert box when user try to upload files more than maximum number allowed?

Thank you.

Answer 1

Well, I guess there is no direct way. You have to program it manually yourself.

('#fileupload').fileupload({
 ....
}).on('fileuploadadd', function (e, data) {
//program your logic here
filenum = data.files.length;
...
});

Answer 2

Use limitMultiFileUploads instead of maxNumberOfFiles like,

$('#fileupload').fileupload({
    url: 'server/index.php',
    dataType: 'json',
    dropZone: $('#dropzone'),
    disableImageResize: false,
    imageMaxWidth: 800,
    imageMaxHeight: 800,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    limitMultiFileUploads:3, // use limitMultiFileUploads here
    singleFileUploads: false,
});

You can use limitMultiFileUploadSize for total file size limit.

Read jQuery-File-Upload-options