Limit file type, size, single upload does not work when loading jquery file

Question

I am trying to use blueimp jquery file upload using Spring MVC to upload excel files. Files are uploaded. I would like to limit the excel file type (xls, xlxs), and also allow only one file to be downloaded. I use the parameters in accordance with the recommendations of the plugin, also tried to add the add: callback to perform the check, none of them work. Any help please.

The js file I'm using (in the same order)

 jquery.min.js <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> jquery.ui.widget.js <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> jquery.iframe-transport.js <!-- The basic File Upload plugin --> jquery.fileupload.js bootstrap.min.js 

My HTML code

 <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-default fileinput-button"> <i class="fa fa-1x fa-plus"></i> <span>Select files...</span> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="files[]" data-url="file/upload" multiple> </span> <br> <br> <!-- The global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> <!-- The container for the uploaded files --> <div id="files" class="files"></div> <table id="uploaded-files" class="table table-striped table-bordered dataTable"> <tr> <th>File Name</th> <th>File Size</th> <th>File Type</th> <th>Download</th> </tr> </table> 

javascript code:

 $(function() { 'use strict'; // the location of your server-side upload handler: var url = ''; $('#fileupload') .fileupload( { //this doesnt work add : function(e, data) { var uploadErrors = []; var acceptFileTypes = /(\.|\/)(xls|xlsx)$/i; alert(acceptFileTypes .test(data.originalFiles[0].type)); if (data.originalFiles[0]['type'].length && acceptFileTypes .test(data.originalFiles[0].type)) { uploadErrors .push('Not an accepted file type'); } if (data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) { uploadErrors .push('Filesize is too big'); } if (uploadErrors.length > 0) { alert(uploadErrors.join("\n")); } else { data.submit(); } }, dataType: 'json', maxFileSize : 50000,//this doesnt work acceptFileTypes : /(\.|\/)(xls|xlsx)$/i, //this doesnt work singleFileUploads : true, maxNumberOfFiles : 1, done: function (e, data) { $("tr:has(td)").remove(); $.each(data.result, function (index, file) { $("#uploaded-files").append( $('<tr/>') .append($('<td/>').text(file.fileName)) .append($('<td/>').text(file.fileSize)) .append($('<td/>').text(file.fileType)) .append($('<td/>').html("<a href='file/get/"+index+"'>Click</a>")) )//end $("#uploaded-files").append() }); }, fail : function(e, data) { $ .each( data.messages, function(index, error) { $( '<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>') .appendTo( '#files'); }); }, progressall : function(e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css('width', progress + '%'); } }).prop('disabled', !$.support.fileInput).parent() .addClass($.support.fileInput ? undefined : 'disabled'); }); 

Answer 1

I found a solution for some reason, the following attributes do not work on Jquery Blueimp Basic Download

 maxFileSize : 50000,//this doesnt work acceptFileTypes : /(\.|\/)(xls|xlsx)$/i, //this doesnt work singleFileUploads : true, maxNumberOfFiles : 1, 

so I had to use the add: callback, as mentioned in my question, but with a few changes in the callback above, I got it working. Here is the new callback:

 add : function(e, data) { var uploadErrors = []; if (!(/(\.|\/)(xls|xlsx)$/i) .test(data.files[0].name)) { uploadErrors .push('Not an accepted file type'); } if (data.files[0].size > 5000000) { uploadErrors .push('Filesize is too big'); } if (uploadErrors.length > 0) { alert(uploadErrors.join("\n")); } else { data.submit(); $('#fileupload').fileupload('disable'); } },