title: Restrict filetype ,size,single upload doesn't work in jquery file upload
body: <p>I am trying to use the <a href="https://blueimp.github.io/jQuery-File-Upload/basic.html" rel="nofollow">blueimp jquery file upload</a> 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 <code>add:</code> callback to perform the validation neither of it works . Any help please .</p>
  
  <p>The js file I'm using(in the same order)</p>
  
  <pre><code>jquery.min.js
      &lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
  jquery.ui.widget.js
      &lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
  jquery.iframe-transport.js
      &lt;!-- The basic File Upload plugin --&gt;
  jquery.fileupload.js
  bootstrap.min.js
  </code></pre>
  
  <p>My HTML code is</p>
  
  <pre><code>&lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
                  &lt;span class="btn btn-default fileinput-button"&gt; &lt;i
                      class="fa fa-1x fa-plus"&gt;&lt;/i&gt; &lt;span&gt;Select files...&lt;/span&gt; &lt;!-- The file input field used as target for the file upload widget --&gt;
                      &lt;input id="fileupload" type="file" name="files[]" data-url="file/upload" multiple&gt;
                  &lt;/span&gt; &lt;br&gt; &lt;br&gt;
                  &lt;!-- The global progress bar --&gt;
                  &lt;div id="progress" class="progress"&gt;
                      &lt;div class="progress-bar progress-bar-success"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- The container for the uploaded files --&gt;
                   &lt;div id="files" class="files"&gt;&lt;/div&gt;
                  &lt;table id="uploaded-files" class="table table-striped table-bordered dataTable"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;File Name&lt;/th&gt;
                          &lt;th&gt;File Size&lt;/th&gt;
                          &lt;th&gt;File Type&lt;/th&gt;
                          &lt;th&gt;Download&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>the javascript code is:</p>
  
  <pre><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
                                      &amp;&amp; acceptFileTypes
                                              .test(data.originalFiles[0].type)) {
                                  uploadErrors
                                          .push('Not an accepted file type');
                                  }
                                  if (data.originalFiles[0]['size'].length
                                      &amp;&amp; data.originalFiles[0]['size'] &gt; 5000000) {
                                  uploadErrors
                                          .push('Filesize is too big');
                                  }
                                  if (uploadErrors.length &gt; 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(
                                                  $('&lt;tr/&gt;')
                                                  .append($('&lt;td/&gt;').text(file.fileName))
                                                  .append($('&lt;td/&gt;').text(file.fileSize))
                                                  .append($('&lt;td/&gt;').text(file.fileType))
                                                  .append($('&lt;td/&gt;').html("&lt;a href='file/get/"+index+"'&gt;Click&lt;/a&gt;"))
                                                  )//end $("#uploaded-files").append()
                                      }); 
                                  },
  
                                  fail : function(e, data) {
                                      $
                                              .each(
                                                      data.messages,
                                                      function(index, error) {
                                                          $(
                                                                  '&lt;p style="color: red;"&gt;Upload file error: '
                                                                          + error
                                                                          + '&lt;i class="elusive-remove" style="padding-left:10px;"/&gt;&lt;/p&gt;')
                                                                  .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');
          });
  </code></pre>