JQuery File Upload sends each file in individual Post Request?

Question

My problem is simple and complex same time:

Im tryin to upload files using jQuery fileUpload library with spring mvc controller as server side, but my files are being uploaded by one request each. What i want is posting them ALL in ONE request.

I have tried singleFileUploads: false option but its not working, if i pass 4 files to upload, the method responsible for handling the post is called 4 times.

Im using this form to post files:

<div class="upload-file-div">
    <b>Choose csv files to load</b> <input id="csvUpload" type="file"
    name="files[] "data-url="adminpanel/uploadCsv" multiple />
</div>
<div id="dropzoneCsv">Or drop files here</div>

<div id="progressCsv">
<div class="bar" style="width: 0%;"></div>
</div>

Jquery method to upload files:

$('#csvUpload').fileupload(
                {
                    singleFileUploads: false,
                    dataType : 'json',
                    done : function(e, data) {
                        $("tr:has(td)").remove();
                        $.each(data.result, function(index, file) {

                            $("#uploaded-csv").append(
                                    $('<tr/>').append(
                                            $('<td/>').text(file.fileName))
                                            .append(
                                                    $('<td/>').text(
                                                            file.fileSize))
                                            .append(
                                                    $('<td/>').text(
                                                            file.fileType))
                                            .append(
                                                    $('<td/>').text(
                                                            file.existsOnServer))
                                            .append($('<td/>')));
                        });
                    },

                    progressall : function(e, data) {
                        var progress = parseInt(data.loaded / data.total * 100,
                                10);
                        $('#progressCsv .bar').css('width', progress + '%');
                    },

                    dropZone : $('#dropzoneCsv')
                });

And handler method :

@RequestMapping(value = "/adminpanel/uploadCsv", method = RequestMethod.POST)
    public @ResponseBody
    List<FileMeta> uploadCsv(MultipartHttpServletRequest request, HttpServletResponse response) {

        // 1. build an iterator
        Iterator<String> itr = request.getFileNames();
        MultipartFile mpf = null;
        List<FileMeta> csvFiles = new ArrayList<FileMeta>();
        // 2. get each file
        while (itr.hasNext()) {

            // 2.1 get next MultipartFile
            mpf = request.getFile(itr.next());
            System.out.println(mpf.getOriginalFilename() + " uploaded! ");

            // 2.3 create new fileMeta
            FileMeta fileMeta = new FileMeta();
            fileMeta.setFileName(mpf.getOriginalFilename());
            fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb");
            fileMeta.setFileType(mpf.getContentType());

            try {
                File dir = new File(Thread.currentThread().getContextClassLoader()
                        .getResource("").getPath()+"CSV");
                if(!dir.exists()) dir.mkdirs();
                File newCSV = new File(dir+"\\"+ mpf.getOriginalFilename());
                if(!newCSV.exists())
                {
                    mpf.transferTo(newCSV);
                    fileMeta.setExistsOnServer(false);
                }
                else fileMeta.setExistsOnServer(true);
            } catch (IllegalStateException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }

            // 2.4 add to files
            csvFiles.add(fileMeta);
        }

        return csvFiles;
    }

I would really need an assistance here :( Files should be loaded in one request, thats why im doing the iterator, but its just not working.

ps. Sorry for my terrible english :(

Answer 1

You may want to try Programmatic file upload instead. The send method will ensure only one request is issued.

Basically keep a filelist variable, update it everytime fileuploadadd callback happens, then use this filelist for the send method.

For example:

$document.ready(function(){
    var filelist = [];
    $('#form').fileupload({
    ... // your fileupload options
    }).on("fileuploadadd", function(e, data){
        for(var i = 0; i < data.files.length; i++){
            filelist.push(data.files[i])
        }
    })

    $('#button').click(function(){
        $('#form').fileupload('send', {files:filelist});
    })

})

It is inspired by this question.

The reason I found it useful is even if you set singleFileUploads to false, if you do multiple individual selections, they will still be sent with individual requests each, as the author said himself in this GitHub issue