Sending multiple file input fields programmaticall

Question

I'm trying to use the blueimp/jQuery-File-Upload plugin to programmatically send more than one file input field though the same form.

When user select form files, it just append them in a JS variable to further send them with $('#form').fileupload('send') method on form submission. My goal is to use the exactly same synchronous form I was using before in an asynchronous way. So when user click on form submit button, it prevents default action and them let the plugin to do the task, sending all form data and displaying overall upload progress.

I'm mainly following these guides:

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

Actually it's almost working, but it does not send more than one input file to the server end. In fileuploadadd event I'm pushing data.files[0] (my file inputs are single file only, but each of them use different accept attributes) to a "global" uploadable array and then on form submission I use something like $('#form').fileupload('send', {files: uploadable}).

I guess I'm not doing it the right way, since only one file is being sent along with form data. What is the correct way to programmatically send more than one file input file using a single form?

I'm also not too confident about overall upload progress... If I use fileuploadprogressall event to read the upload progress will it be reporting the progress of all uploaded files?

JS (simplified)

$(function () {
    var uploadable = [];

    $('#form').fileupload({
        autoUpload: false,
        singleFileUploads: false,
        add: function (event, data) {
            uploadable.push(data.files[0]);

            return false;
        },
        // other event callbacks
    })
        .prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

    $('#form').submit(function (event) {
        event.preventDefault();

        $('#form').fileupload('send', {files: uploadable});
    });
});

HTML

<form id="form" action="upload" method="post" enctype="multipart/form-data">
  <!-- other text/hidden inputs that will also be sent -->
  <input type="file" name="image" id="image" accept="image/*" />
  <input type="file" name="video" id="video" accept="video/*" />
</form>

Answer 1

uploadable.push(data.files[0])

You vividly told the compiler to only push the first file.
Have you tried using foreach and push all files?

Thank you,