Uploading multiple files asynchronously by blueimp jquery-fileupload

Question

I'm using jQuery File Upload library (http://github.com/blueimp/jQuery-File-Upload), and I've been stuck figuring out how to use the library satisfying the following conditions.

• The page has multiple file input fields surrounded by a form tag.
• Users can attach multiple files to each input field
• All files are sent to a server when the button is clicked, not when files are attached to the input fields.
• Upload is done asynchronously
• Say the page has 3 input fields with their name attributes being "file1[]", "file2[]" and "file3[]", the request payload should be like {file1: [ array of files on file1[] ], file2: [ array of files on file2[] ], ...}

Here's jsFiddle, it's behaving weird so far in that it sends post request twice and the first one is cancelled.

Updates

Now thanks to @CBroe 's comment, the issue that request is sent twice is fixed. However the keys of request parameter is not correctly set. Here's updated jsFiddle.

http://jsfiddle.net/BAQtG/27/

---

The core part of js code looks like this.

$(document).ready(function(){
    var filesList = []
    var elem = $("form")
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0])
    });

    $("button").click(function(){
        file_upload.fileupload('send', {files:filesList} )
    })

})

Anybody have idea how to get this to work?

Answer 1

Solved.

Fiddle: http://jsfiddle.net/BAQtG/29/

And js code

$(document).ready(function(){
    var filesList = [],
        paramNames = [],
        elem = $("form");
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0]);
        paramNames.push(e.delegatedEvent.target.name);
    });

    $("button").click(function(e){
        e.preventDefault();
        file_upload.fileupload('send', {files:filesList, paramName: paramNames});
    })
})

Answer 2

The first POST request triggered by your script gets canceled, because the button submits the form (causing the second POST request).

Use type="button" on the button if you don’t want it to have submit functionality.

Answer 3

You have to either add a return false;, as shown below:

$("button").click(function(){
    file_upload.fileupload('send', {files:filesList} )
    return false;
})

or specify the type="button" attribute:

<button type="button">send by fileupload send api</button>

In order to set the formData, use the following:

$("button").click(function () {
    file_upload.fileupload('send', {
        files: filesList,
        formData: {
            json: JSON.encode({
                extra: 1
            })
        }
    })
})

Specifically for JSFiddle, if you want to get the extra value in the response, you have to encode it and assign it to a property named json.

Here's a working example.