How to add submit cancel button in jquery-file-upload basic-plugin

Question

I am using jquery-file download with Rails 4, I started with https://github.com/tors/jquery-fileupload-rails-paperclip-example . So I use jquery-rails, jquery-fileupload-rails and clip gems.

As I do not crack on jquery or javascript, I try to simplify and understand everything by changing the code to make remote calls on rails with js.erb.

So the file list is a partial rail (_videos.html_erb), and the index action in the uploads controller has index.js.erb for js response. And I added $.get('/uploads'); in the fileupload done event to update partial.

everything works well, if the cancel button , and I do not understand what I need to do and where.

Here is what docs tell me:

How to cancel the download

Download can be canceled by calling the jqXHR object interrupt method:

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

And this is my index.html.erb:

Here, for the progress bar and text directions, I put the extracted code of the form 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 suppose I need to put something like this "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'); } }); 

and then

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

but this will not work, and the code from docs crashes everywhere: filesList doesn't exist ... etc.

Well, I think I need some basic jquery or javascript tutorial

Thanks in advance

Answer 1

You can also call abort() on data to cancel individual incoming orders.

  $( '#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 ) { /* ... */ } }); 

Answer 2

The solution was related to javascript scope:

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

And just use the xhr abort method:

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