How to programatically submit/send multiple files using jquery-file-upload

Question

There's quite a lot of options for this plugin (jquery-file-upload) and the docs look good, but I'm still a bit confused. I have a form that looks like:

<form id="fileupload" action="/file-upload" method="POST" enctype="multipart/form-data">
    <div class="form-buttons">
    <span id="add-files-wrap">
        <span>Add Files</span>
        <input id="add-files-btn" type="file" name="files[]" multiple>
    </span>
    <button id="upload-btn" type="button" onclick="uploadFiles()" class="btn-disabled">
        <span>Start Upload</span>
    </button>
    </div>
</form>

When a file or files get added, the add callback in the fileupload intialiser is triggered:

$('#fileupload').fileupload({
url: '/file-upload',
sequentialUploads: true,
add: function(e, data) {
    $.each(data.files, function(idx, file) {
            MY_FILES.push(file);
        }
    }
});

Then when the upload button from the form is clicked:

function uploadFiles() {
for (var i=0; i<MY_FILES.length; i++) {
        // Submit the file - how ???
    }
}

I'd like to submit/send each file one at a time, using separate requests for each. I know I could do fileupload('send', {files: MY_FILES}) but I'd like to have a callback that's triggered for every successful response from the request. I'm a bit confused with all the callback options in the docs.

Edit:
Answered my own question.

RTF · Accepted Answer · 2014-04-27 13:21:06Z

8

After looking through the docs some more, I ended up doing something like this:

function uploadFiles() {
    uploadFile( FILES.pop() );
}

function uploadFile(file) {
    if (file == null) {
        console.log("Finished processing files.");
        return;
    }
    $('#fileupload').fileupload('send', {files: [file]})
    .success(function (result, textStatus, jqXHR) {
        console.log("Success...");
        uploadFile( FILES.pop() );
    })
    .error(function (jqXHR, textStatus, errorThrown) {
        console.log("Error...");
    })
    .complete(function (result, textStatus, jqXHR) {
        console.log("Complete...");
    });
}

This works fine.

answered Apr 27, 2014 at 13:21

RTF

6,52414 gold badges80 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to programatically submit/send multiple files using jquery-file-upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related