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?

Donau

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

Donau

The jsfiddle code doesn't actually attach the files themselves to the POST. (it's application/x-www-form-encoded, not mulitpart) Any suggestions on what is missing from the example? – Mahmud

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.

Balmy

Thank you for the comment, this was part of the issue! Now the problem left is how to send files with multiple keys using the library. – Donau

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.

Lasko

Thank you for this. As mentioned above, the keys of request parameter are not still set correctly. – Donau