I am trying to use the blueimp jquery file upload plugin with Spring MVC to upload the excel files.The files are getting uploaded. I would like to restrict the file type to excel(xls,xlxs),also allow only single file uploads . I am using the parameters as recommended by the plugin, also tried adding the add: callback to perform the validation neither of it works . 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 is
<!-- 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>
the javascript code is:
$(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');
});