Question

I'm using Fine Uploader to upload files directly to Amazon S3 (not relevant to the issue).

What I'm doing is to generate an "attachment" backbone.js model (which generates an unique ID), and passing that ID to the uploader via setParams in the submit event, in order for me to identify the attachment in the complete event and take appropriate actions.

The problem is manifesting when uploading multiple files at the same time (tried with 10 files). Fine Uploader apparently calls the submit callback too fast, and I am getting duplicate model IDs in the complete event.

If I add breakpoints to the submit event and do nothing, just hit "play" again, the concurrency problem is no longer present.

Part of my code is:

var self = this;
this.uploader.on('submit', function() {
    var attachment = new Market.InboxPage.Models.Attachment(); // generates a new model with a unique ID
    self.attachments[attachment.cid] = attachment; // self.attachments is a model collection

    self.uploader.setParams({'cid': attachment.cid});
});

this.uploader.on('complete', function(event, id, file, response) {
    self.attachments[response.metadata.cid].set({ // getting duplicate data here
        filename: response.metadata.qqfilename,
        key: response.metadata.key,
        filesize: response.metadata.filesize
    });
    self.attachments[response.metadata.cid].updateInDom();
    return false;
});
Was it helpful?

Solution

The issue is with your calls to setParams. You are effectively overwriting the params for all existing files with each call to setParams. Instead, you should be targeting a specific file with each call to setParams. setParams allows you to do this by specifying a file ID as a parameter to the setParams call. For example:

this.uploader.on('submitted', function(event, id, name) {
    var attachment = new Market.InboxPage.Models.Attachment(); // generates a new model with a unique ID
    self.attachments[attachment.cid] = attachment; // self.attachments is a model collection

    self.uploader.setParams({'cid': attachment.cid}, id); });

Notice how I switched your logic to the submitted event, which is called after the file has been successfully submitted, and an ID is available.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top