How to remove file from the queue to stop upload before upload starts in blueimp Basic?

Question

Here is the thing,

I want cancel button similar to Basic plus UI or jQuery UI in Basic. This question might look silly to you. But actually i got confuse from template which blueimp are using in Basic plus UI or jQuery UI to list upload and downloaded file with start, delete and cancel button.

EDIT 1 here: Even i can't use that template because i am working in twig template, which has similar syntax which give error if i use.

I need code to remove file from the queue and to prevent upload before upload start.

I searched that _cancelHandler is in jquery.fileupload-ui.js but there are lots of function which are making me confuse.

Please someone help.

Even i read basic use of plugin in documentation (minimal setup guide) but there is not data to have cancel button.

EDIT 2 here : I think i missed to tell that i need only single upload button which will upload all the files which are in queue. if any file in the list cancelled then that should not upload.

here is my code

$(function () {

    var cancel_btn = $('<button/>')
    .addClass('btn btn-warning cancel pull-right')
    .html('<i class="icon-ban-circle icon-white"></i><span> Cancel')
    .on('click', function () {
    var $this = $(this),
        data = $this.data();
        $(this).parents('tr').remove();

        alert("code to remove from the queue and to prevent upload before upload start");
    });

    var delete_btn = $('<button/>')
    .addClass('btn btn-danger cancel pull-right')
    .html('<i class="icon-ban-circle icon-white"></i><span> Delete')
    .on('click', function () {
        alert('code needed to delete file');
    });    

    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        add: function (e, data) {

            console.log(data);
           // data.context = $('<div/>').appendTo('#files');
            $.each(data.files, function (index, file) {

                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                var td2 = document.createElement('td');
                var td3 = document.createElement('td');
                $(td1).append(file.name);
                $(td2).append(file.size);
                $(td3).append(cancel_btn.clone(true).data(data));
                $(tr).append(td1,td2,td3);
                $('#files_list tbody').append(tr);

                var size = $('#files_list tbody tr').size();
                if(size < 1 )
                    $('#files_list').addClass('hide');
                else
                    $('#files_list').removeClass('hide');
            });

            $('#submit').click(function (){
                //data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                data.submit();
                $('#files_list tbody').html('');
            });
        },
        done: function (e, data) {

            $.each(data.result.files, function (index, file) {
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                var td2 = document.createElement('td');
                var td3 = document.createElement('td');
                $(td1).append(file.name);
                $(td2).append(file.size);
                $(td3).append(delete_btn.clone(true).data(data));
                $(tr).append(td1,td2,td3);
                $('#files_list tbody').append(tr);
            });
        },
        fail: function (e, data) {
            //console.log(data.result);
            $.each(data.result.files, function (index, file) {
                var error = $('<span/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }        
    });
});

Answer 1

You can add an "upload" and "cancel" button to every file and bind the submit function on these buttons.

var cancel_btn = $('<button/>')
    .addClass('btn btn-warning cancel pull-right')
    .html('<i class="icon-ban-circle icon-white"></i><span> Cancel')
var upload_btn = $('<button/>')
    .addClass('btn btn-warning upload pull-right')
    .html('<i class="icon-ban-circle icon-white"></i><span> Upload')
    });
 $('#submit').on('click',function(){
     $('.upload').click() //click upload buttons and upload all files in the queue
 })
 $('#cancel').on('click',function(){
     $('.cancel').click() //click cancel buttons and remove all files in the queue
 })
 .......
 $('#files_list tbody').append(tr);
 $(td4).append(upload_btn.clone(true).data(data));
 $('.upload').eq(-1).on('click',function(){//button to upload only this file
      data.submit();
 })
 $('.cancel').eq(-1).on('click',function(){
      $(this).parent().parent().remove()//or something like this, 
                                        //delete the whole <tr> 
                                        //and remove the file from the queue
 })