maxFileSize and acceptFileTypes in blueimp file up

Question

I'm using Blueimp jQuery file upload plugin for upload files.

I had no problem in uploading but the option maxFileSize and acceptFileTypes do not work.

This is my code:

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                    .appendTo('#div_files');
            });
        },
        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('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

Answer 1

• You can also use the file extension to check for the filetype.

• More simpler way would be to do something as given below inside add :

  add : function (e,data){
     var extension = data.originalFiles[0].name.substr( 
     (data.originalFiles[0].name.lastIndexOf('.') +1) );
              switch(extension){
                  case 'csv':
                  case 'xls':
                  case 'xlsx':
                      data.url = <Your URL>; 
                      data.submit();
                  break;
                  default:
                      alert("File type not accepted");
                  break;
              }
    }
  

Answer 2

Just an example of event handler for Add event. Assumes that singleFileUploads option is enabled (which is the default). Read more jQuery File Upload documentation how to bound with add/fileuploadadd event. Inside loop you can use both vars this or file. An example of getting size property: this['size'] or file.size.

    /**
     * Handles Add event
     */
    base.eventAdd = function(e, data) {

        var errs = [];
        var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
        var maxFileSize = 5000000;

        // Validate file
        $.each(data.files, function(index, file) {
            if (file.type.length && !acceptFileTypes.test(file.type)) {
                errs.push('Selected file "' + file.name + '" is not alloawed. Invalid file type.');
            }
            if (this['size'] > maxFileSize) {
                errs.push('Selected file "' + file.name + '" is too big, ' + parseInt(file.size / 1024 / 1024) + 'M.. File should be smaller than ' + parseInt(maxFileSize / 1024 / 1024) + 'M.');
            }
        });

        // Output errors or submit data
        if (errs.length > 0) {
            alert('An error occured. ' + errs.join(" "));
        } else {
            data.submit();
        }
    };