FineUploader uploads the same file multiple times at the same time

Say I want to upload several files at once, which is something I can do when setting the multiple option to true:

var myUploader = new qq.FineUploader({
    element: $('#test')[0],
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false,
});

Now, let's say I have a button that will allow me to select the files I want to upload. If I click said button and select, say, test.txt file, test.txt will be added to the list of files that will be uploaded. So far so good. Now, my problem is that, if I click the button again, and select test.txt file again, it will be added to the list even though it's already in the list.

Is there any way to prevent FineUploader from letting me do this?

Thanks in advance

Solution

I'd be careful declaring a file a duplicate simply based on the name. You should also take size into account, at least. Although, this is not possible in IE9 and older since we can't determine file size client-side in those browsers. Just for the purposes of simplicity, let's use the file name exclusively...

One way is to maintain an array of file names submitted to the uploader. You can add to this list in your an onSubmitted handler. The, you can contribute an onValidate handler that will reject the file if it already exists in the array. Your code would look something like this:

var filenames = [];
var myUploader = new qq.FineUploader({
    element: $('#test')[0],
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false,
    callbacks: {
        onSubmitted: function(id, name) {
            filenames.push(name);
        },
        onValidate: function(fileData) {
            return qq.indexOf(filenames, fileData.name) < 0;
        }
    }
});

Also, just for kicks, why not just use Fine Uploader's jQuery plug-in, since you seems to already be using jQuery in your project? The above example is rewritten using the jQuery plug-in below:

var filenames = [];
$('#test').fineUploader({
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false
})
    .on("submitted", function(event, id, name) {
        filenames.push(name);    
    })
    .on("validate", function(event, fileData) {
        return $.inArray(fileData.name, filenames) < 0;
    });