CODEWITHSUNDEEP
jqueryjquery-file-uploadmulti-upload
rlcabral
rlcabral

Reputation: 1546

jQuery File Upload formData not updating

I already read How to submit additional form data and it in fact works. But what I am trying to accomplish is to update the formData every time a chunk is sent, so the new data is sent to the server along with the chunk.

This is what I have tried:

$('#upload').fileupload({
    maxChunkSize: 100000, // 100KB
    formData: {UploadID: 'just testing'},
}).bind('fileuploadchunkdone', function (e, data) {
    UId = data.jqXHR.responseJSON.files[0].UploadId;
    console.log(UId); // Confirmed, it does have the data sent back by the server
    data.formData = {UploadID: UId}; // It updates, but doesn't send the new data
}).bind('fileuploadchunksend', function (e, data) {
    // tried the same here, but no luck
});

Using Firebug I can see the data sent to the server. The first chunk sends the formData correctly, but the second chunk sends the same data again.

I also tried what is described here by the author, but overriding the send handler doesn't work because it only happens on the first chunk.

Any idea how I can achieve this?

Upvotes: 0

Views: 1968

Answers (2)

omma2289
omma2289

Reputation: 54629

Haven't tested this but you may be able to define your UId variable in a greater scope and update it with every call:

var UId = 'just testing';  

$('#upload').fileupload({
    maxChunkSize: 100000, // 100KB
    formData: function(){
        return [{UploadID: UId}];
    }
}).bind('fileuploadchunkdone', function (e, data) {
    UId = data.jqXHR.responseJSON.files[0].UploadId;
});

Upvotes: 1

rlcabral
rlcabral

Reputation: 1546

Not sure if this is the right way to achieve this. But here is what I did:

var UId = 'just testing'; 

$('#upload').fileupload({
    maxChunkSize: 100000, // 100KB
    //formData: {UploadID: UId} REMOVED      
}).bind('fileuploadchunkdone', function (e, data) {
    // UId is set after the chunk is done
    UId = data.jqXHR.responseJSON.files[0].UploadId;
}).bind('fileuploadchunksend', function (e, data) {
    // and append UploadId
    // Yes, append, not override
    data.data.append('UploadId', UId);
    // This will also be fired on the first chunk upload
    // so it is better to set UId in a greater scope as koala_dev said
}

As I said, I don't know if this is right. But it worked.

Notice that I've removed formData: {UploadID: UId} from the initial setup. Keeping it there would make every chunk to send UploadID twice, first on the top of the chunk (before the file data) with an unchangeable value and then on the bottom of the chunk (after the file data) with the new value.

Upvotes: 0

Related Questions