come aggiungere un pulsante di annullamento caricamento a jquery-file-upload basic-plugin

Question

Sto utilizzando jquery-file-upload con Rails 4, Ho iniziato da https://github.com/tors/jquery-fileupload-rails-paperclip-example. Quindi sto usando jquery-rails, jquery-fileupload-rails e paperclip gems.

Poiché non sono un crack su jquery o javascript, sto cercando di semplificare e capire tutto, modificando il codice per effettuare chiamate remote su rail con js.erb.

In questo modo, l'elenco file è un partial parziali (_videos.html_erb) e l'azione index nel controller upload ha un index.js.erb per rispondere con js. E ho aggiunto $.get('/uploads'); in de fileupload done evento per aggiornare il parziale.

tutto funziona bene, a meno che il pulsante Annulla e non capisco cosa devo fare e dove.

Questo è ciò che mi docs dica:

come annullare un upload

Upload può essere annullato richiamando il metodo Abort su un oggetto jqXHR:

var jqXHR = $('#fileupload').fileupload('send', {files: filesList}) 
    .error(function (jqXHR, textStatus, errorThrown) { 
     if (errorThrown === 'abort') { 
      alert('File Upload has been canceled'); 
     } 
    }); 
$('button.cancel').click(function (e) { 
    jqXHR.abort(); 
}); 

E questo è il mio index.html.erb:

Qui, per barra di avanzamento e di testo indicazioni, ho messo codice estratto forma file-upload-basic-plugin

<div class="container"> 
<h2 id="titol">Upload file</h2> 
<%= form_for Upload.new, :html => { :multipart => true, :id => "fileupload" } do |f| %> 
    <div class="row fileupload-buttonbar"> 
     <%= f.file_field :upload %> 
     <button class="cancel">Cancel upload</button> 
    </div> 

    <hr/> 
<% end %> 

<div id="videos"> 
    <%= render partial: "videos" %> 
</div> 

<!--..........This is necessary even though I don't know why --> 
<script id="template-upload" type="text/x-tmpl"> 
</script> 

<!-- The template to display files available for download --> 
<script id="template-download" type="text/x-tmpl"> 
</script> 
<!--............................................................... --> 

<script type="text/javascript" charset="utf-8"> 

    $('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     data.submit(); 
    }, 
    done: function (e, data) { 
     data.context.text('Upload finished.'); 
     $.get('/uploads'); 
    } 

    }); 

    $('#fileupload').fileupload({ 
    progressall: function (e, data) { 
     $("#titol").text(data.loaded); 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', progress + '%'); 
     } 
    }); 

</script> 

I supose devo mettere somthing così "var XHR ="

$('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     var xhr = data.submit(); 
    }, 
    done: function (e, data) { 
     data.context.text('Upload finished.'); 
     $.get('/uploads'); 
    } 

    }); 

e poi

$(function() { 

    $('button.cancel').click(function (e) { 
    jqXHR.abort(); 
    }); 

}) 

ma questo non funziona e il codice dei documenti si blocca ovunque: filesList doesn't exist ... ecc.

Beh, credo che ho bisogno di qualche consiglio di base su jQuery o javascript

Grazie in anticipo

Answer 1

La soluzione era in conoscenza di variabili JavaScript portata:

$(function() { 

    var xhr;     // <------------ initialize variable 

    $('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     xhr = data.submit(); //<-------------- asign result to var xhr 
    }, 
    done: function (e, data) { 
     data.context.text('.... 

E semplicemente, metodo Abort uso di XHR:

$('button.cancel').click(function (e) { 
    xhr.abort(); 
    alert("abortat"); 
    }); 

Answer 2

Si può anche chiamare abort() su data per annullare individuale uploa in corso ds.

$('#fileUpload').fileupload({ 
     dataType: 'json', 
     add: function(e, data) { 
      var abortBtn = $('<a/>') 
       .attr('href', 'javascript:void(0)') 
       .append('Abort') 
       .click(function() { 
        data.abort(); 
        data.context.remove(); 
       }); 

      data.context = $('<div/>') 
       .appendTo(document.body); 

      data.context.append($('<p/>')) 
       .append('Uploading ' + data.files[0].name) 
       .append(abortBtn); 

      data.submit(); 
     }, 
     done: function(e, data) { 
      /* ... */ 
     } 
    });