current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.