Uploading multiple files asynchronously by blueimp jquery-fileupload
- by Ryo
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.
http://jsfiddle.net/BAQtG/24/
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?
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/
