maxFileSize and acceptFileTypes not working

[nunorafaelrocha]

Hi there.

The properties maxFileSize and acceptFileTypes aren't working.

Here's my code:

 $('#fileupload').fileupload({
    maxFileSize: 500,
    acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,        
    dataType: 'json',
    url: 'upload.php',
  });

Both properties dont work because allow me select any kind of file and allows any file size... :(

Thank for your help!

[blueimp]

I guess you are using the basic plugin version.
maxFileSize and acceptFileTypes are only supported by the UI version.
Also note that IE does not support maxFileSize as is doesn't report any filesize.

[nunorafaelrocha]

So no chance of using maxFileSize and acceptFileTypes on the basic plugin version???

[blueimp]

You can incorporate the _validate() and _hasError methods of the UI version into the basic plugin, if you desire to do so:
https://github.com/blueimp/jQuery-File-Upload/blob/master/jquery.fileupload-ui.js#L337
But without a user interface, validation doesn't make much sense for the basic plugin version.

[matt-hwy1]

Glad I found this. I was banging my head on this all day. Your plugin is excellent. I was just puzzled that these options aren't included in the non-ui version since these limitations have nothing to do with UI. Thanks in any case. Your plugin rocks.

[cdmckay]

This Stack Overflow posts explains how to add support: http://stackoverflow.com/questions/17451629/maxfilesize-and-acceptfiletypes-in-blueimp-file-upload-plugin-do-not-work-why

[blueimp]

That blueimp guy since moved the validation code out into it's own plugin, which you can simply include after the process and basic plugin and you will have validation support out of the box:
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-validate.js

[pavdro]

HI blueimp,
I can't get file type validation to work with those 2 files included.
I'm using latest Firefox version version and I have put code from examples

disableValidation: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,

Also could submitting on add somehow ignore validation?

add: function (e, data) {
                data.submit();
            },

Thanks,
Pav

[blueimp]

Yeah, if you override the add callback, you won't have validation by default.

[pomartel]

So @blueimp you say the validations (and image resize it seems) won't work by default if the add callback is overridden. Any suggestion on how to make these features work while keeping the custom add callback ? I looked all over the internet but found nothing!

[blueimp]

Please have a look here:
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

Adding additional event listeners via bind (or on method with jQuery 1.7+) method is the preferred option to preserve callback settings by the jQuery File Upload UI version.

Alternatively, you can also simply start the processing in your own callback, like this:
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

[pomartel]

I couldn't get the first option to work but the second one worked like a charm! Thanks for your awesome support!

[rreynier]

@blueimp, I am using the basic implementation. I added both:

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-validate.js

I then added this to my config:

disableValidation: false
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i

This appears to work, as the automatic upload is not firing as expected. My problem is I am unable to find the callback for failed validation so I can write my own logic for displaying the error. Thoughts?

[vinaybvk]

Hi,

I am not using the add call back and I am trying to achieve file types restriction by using the accept file types option. I need to restrict exe and js files to be added for that I am using the below regular expression

acceptFileTypes: /^[^.]+$|.(?!(js|exe)$)([^.]+$)/ig

The issue I am facing now is that when i add more than one exe file the validation is not showing error for the 2nd exe file in the same way when I am adding 3 exe files then validation is happening for 2 exe files but the 3rd file is not showing validation error. This is same for js as well. Couldnt able to figure out if its because of the regular expression or its because of any other issue.

Could any one please let me know why it is happening like this.

Thanks,

[amithgeorge]

@rreynier, there doesn't seem to be a validation callback. Instead I am using the following code to manually invoke the process queue (which has validation as the only item). The process function returns a promise. You can attach a failure handler to this promise to invoke custom logic for displaying the error.

$fileInput.fileupload({
    url: 'upload_url',
    type: 'POST',
    dataType: 'json',
    autoUpload: false,
    disableValidation: false,
    maxFileSize: 1024 * 1024,
    messages: {
        maxFileSize: 'File exceeds maximum allowed size of 1MB',
    }
});

$fileInput.on('fileuploadadd', function(evt, data) {
    var $this = $(this);
    var validation = data.process(function () {
        return $this.fileupload('process', data);
    });

    validation.done(function() {
        makeAjaxCall('some_other_url', { fileName: data.files[0].name, fileSizeInBytes: data.files[0].size })
            .done(function(resp) {
                data.formData = data.formData || {};
                data.formData.someData = resp.SomeData;
                data.submit();
        });
    });
    validation.fail(function(data) {
        console.log('Upload error: ' + data.files[0].error);
    });
});

[bingxie]

Thank @amithgeorge It works very well!