Cancel, Abort and Retry individual file upload with ResumableJS

Question

I've successfully managed to upload multiple files in chunks to a server using ResumableJS. During the upload process the user is able to see the overall upload progress and the individual file upload percentage. It's also possible to pause/resume the overall upload.

What i would like to now is allow the user to cancel/abort an individual file upload without interrupting the other file uploads.
In ResumableJS website there are some methods that allow to do what i want, but no examples on how to accomplish this.
I have tried the following:

onclick="ResumableFile.abort(); return(false);"
onclick="file.abort(); return(false);"
onclick="this.abort(); return(false);"

How may i abort a specific file upload without interrupting the overall file upload?

UPDATE: Here is my JS code:

var r = new Resumable({
    target: 'FileHandler.ashx'
});

// Resumable.js isn't supported, fall back on a different method
if (!r.support)
{}
else
{
    // Show a place for dropping/selecting files
    $('.resumable-drop').show();
    r.assignDrop($('.resumable-drop')[0]);
    r.assignBrowse($('.resumable-browse')[0]);

    // Handle file add event
    r.on('fileAdded', function (file)
    {
        //// Add the file to the list
        $('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span> <button type="button" id="removeButton" onclick="abortFile();">Remove</button>');
        $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);

        // Actually start the upload
        r.upload();
    });

    //var file = new ResumableFile();

    //$("#removeButton").on("click", function ()
    //{
    //    console.log("abort!");
    //    file.abort();
    //});

    function abortFile()
    {
        console.log("abort!");
        r.abort();
    }

    r.on('pause', function ()
    {
        // Show resume, hide pause main progress bar
    });

    r.on('complete', function ()
    {
        // Hide pause/resume when the upload has completed
    });

    r.on('fileSuccess', function (file, message)
    {
        // Reflect that the file upload has completed
    });

    r.on('fileError', function (file, message)
    {
        // Reflect that the file upload has resulted in error
    });

    r.on('fileProgress', function (file)
    {
        // Handle progress for both the file and the overall upload
    });

}

With Ruben Rutten's help here is how i solved my issue:

// Handle file add event
r.on('fileAdded', function (file)
{
    // Show progress bar

    // Show pause, hide resume

    //// Add the file to the list
    $('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span> <button type="button" class="removeButton" id="' + file.uniqueIdentifier + '">Remove</button>');
    $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);


    ///event to remove file from upload list
    $(".removeButton").on("click", function ()
    {
        for (var i = 0; i < r.files.length; i++)
        {
            var identifier = $(this).attr("id");

            if (r.files[i].uniqueIdentifier == identifier)
            {
                r.files[i].cancel();
                $('.resumable-file-' + identifier).remove();
            }
        }
    });

    r.upload();

});

just came across this now. how are you getting around the chunked file(s) of the cancelled upload? sending the deleted identifier to the server later on so that it will delete them? — Alex, Feb 08 '17 at 05:33

score 1 · Answer 1 · answered Dec 19 '18 at 12:40

I know this is an old question, but this might help someone:

Looking at your solution, there is a more efficient way to obtain the resumable instance than iterating all of the files:

// event to remove file from upload list
$(".removeButton").on("click", function ()
{
    var identifier = $(this).attr("id");
    var file = resumable.getFromUniqueIdentifier(identifier);
    file.cancel();
    $('.resumable-file-' + identifier).remove();
});

score 0 · Accepted Answer · answered Nov 26 '14 at 02:12

0

If you have your JavaScript file / part, you create a var r = new Resumable(). You should create a function that aborts it, such as

function abortFile() {
    r.abort();
}

Then on your button, use onclick="abortFile(); return false;"

I haven't tested it, but it should work.

In case you use jQuery, you could do the following:

<button id="cancelButton">Cancel</button>

<script type="text/javascript">
    // Not sure if this works, just to test
    var file = new ResumableFile();

    $("#cancelButton").on("click", function() {
        file.abort();
    });
</script>

answered Nov 26 '14 at 02:12

Ruben Rutten

1,659
2
15
30

hi @ruben thanks for your fast reply. i tested both your suggestions but none of them worked :( the first example i get this error: `ReferenceError: ResumableFile is not defined` and in the second exemple a get: `ReferenceError: ResumableFile is not defined`. what might be the issue? – Ricky Nov 26 '14 at 02:57
Are you sure you included Resumable before you ran your own script? After rereading the documentation, the .abort() function is only possible for a single file. You need .cancel() to stop the entire upload. All queued files are stored in the `.files` array. You can abort these individual ones. If you want to abort the 2nd file, use `r.files[1].abort()` – Ruben Rutten Nov 26 '14 at 02:58
Do you want to abort ONE file or the entire batch? – Ruben Rutten Nov 26 '14 at 18:31
I'm able to abort the whole batch, and i what o give the user the ability to remove/abort a selected file from that batch. – Ricky Nov 26 '14 at 19:27
What you have to do then is show a list of all the files the user has currently selected. For every file, create a button to abort it. Give all the buttons a `data-fileid` that stores the index of the file and a class called `.delete`, then when you click the button, do the following: `$('.delete').on("click", function() { r.files[$(this).attr("data-fileid")].abort(); });` – Ruben Rutten Nov 26 '14 at 19:30

Cancel, Abort and Retry individual file upload with ResumableJS

2 Answers2

Linked