Blueimp file upload one request - files not being sent

Question

I have a form that allows file uploads in various fields that are dynamically added to the form. I'm using Blueimp's jQuery file upload plugin. I'm trying to have multiple files be sent in one request. I do not want multiple requests to be sent. When I submit the form, the files to be uploaded are not included in the request. I'm maintaining them in a filesList array in the add method and making sure to override existing values. Then I use the send option to send the files. Though, they are not included in the ajax post. What am I missing? I've seen others online try to accomplish this. However, I have not found a solid working example. Below is my code:

  var fileList = [],
    exists = false;

$form.fileupload({
    autoUpload: false,
    singleFileUpload: false,
    url: '/handler.php',
    add: function(e, data) {
        exists = false;
        for(var i = 0, len = filesList.length; i < len; i++) {
            if(filesList[i].paramName === data.paramName) {
                // file already exists for this param, replace it
                exists = true;
                filesList[i] = data;
                break;
            }
        }

        // no file exists for this param, add it to array
        if(!exists) {
            filesList.push(data);
        }

        $form.off('submit').one('submit', function(e) {
            $form.fileupload('send', {
                files: filesList
            });

            return false;
        });
    }
})

Showers

Answer 1

I think your problem is that the option is singleFileUploads with an 's'.

From the documentation:

singleFileUploads

By default, each file of a selection is uploaded using an individual request for XHR type uploads. Set this option to false to upload file selections in one request each.

Note: Uploading multiple files with one request requires the multipart option to be set to true (the default).

Type: boolean Default: true

Kareykari

Answer 2

When you want to submit your form with attached files you must call the data.submit() function.

From the doc:

The upload starts when the submit method is invoked on the data parameter.

data.submit() returns a Promise object and allows to attach additional handlers using jQuery's Deferred callbacks.

Yuri