Restrict filetype ,size,single upload doesn't work in jquery file upload

Question

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');
        });

Lakshmi · Accepted Answer · 2015-04-03 06:48:10Z

2

I found the solution myself for some reason the following attributes doesnt work on Basic Jquery Blueimp file upload

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 little changes to 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');
                                    }
                                },

answered Apr 3, 2015 at 6:48

Lakshmi

2,2943 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Tschan Over a year ago

It is correct that the basic file upload comes without validation. However, you can simply add validation features by including the following script: github.com/blueimp/jQuery-File-Upload/blob/master/js/…

Collectives™ on Stack Overflow

Restrict filetype ,size,single upload doesn't work in jquery file upload

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related