proper cancel with fine-uploader core

Question

i'm trying to implement a multiple uploader with fine-uploader. I'm building my own UI for it. Basically it works as intended (selecting multiple files -> upload just fine) But when I do:

1. add file1
2. add file2
3. delete file2 (call to cancel(id)) -> status changes to cancelled
4. add file3

first file is getting uploaded, but then i get an exception: Error: [Fine Uploader 5.11.8] 1 is not a valid file ID to upload! (which referes to the deleted/cancelled file) third file is not uploaded anymore.

    $(document).ready(function () {
    $messages = $('#messages');
    $("#uploader").fineUploader({
        uploaderType: 'basic',
        element: $('#uploader'),
        button: $('.img-upload-button'),
        debug: true,
        autoUpload: false,
        multiple: true,
        sizeLimit: 209715200,
        request: {
            endpoint: '/handler?action.uploadImage'
        }
    }).on('submit', function(event, id, fileName) {
        $messages.html('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0">onSubmit</div>');
        addBlock(id, fileName);
    }).on('upload', function(event, id, fileName) {
        $('#file-' + id).addClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="Initializing. Please hold." style="width: auto;"> ' + 'Initializing ' + '“' + fileName + '”');
    }).on('progress', function(event, id, fileName, loaded, total) {
        console.log('progress: ' + loaded);
        if (loaded < total) {
            progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
            $('#file-' + id).removeClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="In progress. Please hold."> ' + 'Uploading ' + '“' + fileName + '” ' + progress);
        } else {
            $('#file-' + id).addClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="Saving. Please hold."> ' + 'Saving ' + '“' + fileName + '”');
        }
    }).on('complete', function(event, id, fileName, responseJSON) {
        console.log('ID: '+id);
        console.log('fileName: '+fileName);
        if (responseJSON.success === true) {
            $('#file-' + id).addClass('alert-info').html('<div>success</div>');
        } else {
            $('#file-' + id).addClass('alert-info').html('<div>fail</div>');
        }
    }).on('cancel', function(event, id, fileName) {
        $('.block' + id).remove();
    });

EDIT: with button handler:

function addBlock(id, fileName) {
    // inserts a file representation block dynamically
    ... 
    insert button: <input class="img-delete" type="button" value="delete" data="' + id + '">
    ...
    $('.file-list').on("click", ".img-delete", cancelBlock);
}
function cancelBlock() {
    // removes a cancelled block
    var id = $(this).attr("data");
    $("#uploader").fineUploader('cancel', id);
}

$('#trigger-upload').click(function() {
    $('#uploader').fineUploader('uploadStoredFiles');
});

the cancelled block is removed correctly and status update on file id to cancel is also fine.

any hints on what am I missing?

• core
• traditional endpoint
• v5.11.8
• jquery 2.2

Answer 1

Fine Uploader's API expects IDs to be a number. Let's look at your call to the cancel method:

function cancelBlock() {
    // removes a cancelled block
    var id = $(this).attr("data");
    $("#uploader").fineUploader('cancel', id);
}

jQuery's attr method always returns a string. Again, Fine Uploader IDs are numbers. You can cast this string to a number using parseInt(). To fix this issue, your cancelBlock method should look like this instead:

function cancelBlock() {
    // removes a cancelled block
    var id = parseInt($(this).attr("data"));
    $("#uploader").fineUploader('cancel', id);
}

Also, please consider abandoning jQuery, especially when using Fine Uploader. There is absolutely no benefit to using Fine Uploader's jQuery wrapper, and very little benefit to using jQuery elsewhere, given the advancements in JavaScript and the web API.