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

here thing,

i want cancel button similar basic plus ui or jquery ui in basic. question might silly you. got confuse template blueimp using in basic plus ui or jquery ui list upload , downloaded file start, delete , cancel button.

edit 1 here: can't use template because working in twig template, has similar syntax give error if use.

i need code remove file queue , prevent upload before upload start.

i searched _cancelhandler in jquery.fileupload-ui.js there lots of function making me confuse.

please help.

even read basic use of plugin in documentation (minimal setup guide) there not data have cancel button.

edit 2 here : think missed tell need single upload button upload files in queue. if file in list cancelled should not upload.

here 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 remove queue , 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 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 + '%'             );         }             }); }); 

you can add "upload" , "cancel" button every file , bind 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 , upload files in queue  })  $('#cancel').on('click',function(){      $('.cancel').click() //click cancel buttons , remove files in queue  })  .......  $('#files_list tbody').append(tr);  $(td4).append(upload_btn.clone(true).data(data));  $('.upload').eq(-1).on('click',function(){//button upload file       data.submit();  })  $('.cancel').eq(-1).on('click',function(){       $(this).parent().parent().remove()//or this,                                          //delete whole <tr>                                          //and remove file queue  })