Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uploading multiple files asynchronously by blueimp jquery-fileupload

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?

like image 580
Ryo Avatar asked Nov 06 '13 08:11

Ryo


3 Answers

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});
    })
})
like image 63
Ryo Avatar answered Nov 04 '22 12:11

Ryo


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.

like image 33
CBroe Avatar answered Nov 04 '22 12:11

CBroe


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.

like image 1
Alex Filipovici Avatar answered Nov 04 '22 12:11

Alex Filipovici