Come rimuovere il file dalla coda per interrompere il caricamento prima che inizi il caricamento in blueimp Basic?

Question

Qui è la cosa,

voglio pulsante simile al Basic più UI o jQuery UI annullare in base. Questa domanda potrebbe sembrarti sciocca. Ma in realtà ho confuso dal modello utilizzato da blueimp in Basic più UI o nell'interfaccia utente jQuery per elencare i file caricati e scaricati con il pulsante start, delete e cancel.

EDIT 1 qui: Anche io non posso usare quel modello perché sto lavorando in template ramoscello, che ha una sintassi simile che dà errore se uso.

Ho bisogno del codice per rimuovere il file dalla coda e per impedire il caricamento prima dell'avvio del caricamento.

Ho cercato che _cancelHandler sia in jquery.fileupload-ui.js ma ci sono molte funzioni che mi stanno confondendo.

Si prega di qualcuno di aiuto.

Anche io ho letto l'uso di base del plug-in nella documentazione (guida di installazione minima) ma non ci sono dati per il pulsante di cancellazione.

EDIT 2 qui: Penso di essermi perso per dire che ho bisogno solo di un singolo pulsante di upload che caricherà tutti i file che sono in coda. se qualche file nell'elenco è cancellato, allora questo non dovrebbe essere caricato.

Ecco il mio codice

$(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

È possibile aggiungere un "upload" e "Cancel" per ogni file e vincolare la funzione di presentare su questi tasti.

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 
})