jak dodać przycisk anuluj przesyłanie do jQuery-file-upload basic-plugin

Question

Używam przesyłania plików jquery z Rails 4, Zacząłem od https://github.com/tors/jquery-fileupload-rails-paperclip-example. Tak używam jquery-rails, jquery-fileupload-rails i paperclip gems.

Ponieważ nie jestem pęknięciem na jquery lub javascript, staram się uprościć i zrozumieć wszystko, zmieniając kod, aby wykonywać zdalne połączenia z railsami za pomocą js.erb.

Tak więc lista plików jest częścią częściową rails (_videos.html_erb), a akcja indeksu w kontrolce uploaded ma index.js.erb, aby odpowiedzieć js. I dodałem $.get('/uploads'); w zdarzeniu de fileupload done, aby odświeżyć częściowe.

wszystko działa dobrze, , chyba że przycisk anulowania i nie rozumiem, co mam robić i gdzie.

To co docs mi powiedzieć:

Jak anulować przesyłanie

Przesłane może być anulowana przez wywołanie metody przerwaniu na obiekcie 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(); 
}); 

I to jest mój index.html.erb:

Tutaj, dla Kod ekstrakcji 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> 

Przypuszczam muszę postawić somthing jak ten pasek postępu i tekst wskazania, umieścić "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'); 
    } 

    }); 

a następnie

$(function() { 

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

}) 

ale to nie działa, a kod z dokumentu krach wszędzie: filesList doesn't exist ... itd.

Cóż, myślę, że trzeba pewne podstawowe wytyczne dotyczące jQuery lub javascript

góry dzięki

Answer 1

Rozwiązaniem było w wiedzy na temat zakresu zmiennych javascript:

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

i prosto, metoda abort wykorzystaniu koniecznie XHR za:

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

Answer 2

można również zadzwonić abort() na data anulować indywidualny uploa w toku 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) { 
      /* ... */ 
     } 
    });