title: how to add a cancel upload button to jquery-file-upload basic-plugin
body: <p>I'm using jquery-file-upload with Rails 4,
  I started from <a href="https://github.com/tors/jquery-fileupload-rails-paperclip-example" rel="noreferrer">https://github.com/tors/jquery-fileupload-rails-paperclip-example</a>. So I'm using jquery-rails, jquery-fileupload-rails and paperclip gems.</p>
  
  <p>As I am not a crack on jquery or javascript, I'm trying to simplify and understand everything, changing code to make remote calls to rails with js.erb. </p>
  
  <p>So that, the file list is a rails partial (_videos.html_erb) and index action in uploads controller has a index.js.erb to respond with js.
  And I have added <code>$.get('/uploads');</code> in de fileupload <code>done</code> event to refresh the partial.</p>
  
  <p>everything works well, <strong>unless the cancel button</strong> and I don't understand what I have to do and where.</p>
  
  <p>This is what <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/API#how-to-cancel-an-upload" rel="noreferrer">docs</a> tell me:</p>
  
  <p><strong>How to cancel an upload</strong></p>
  
  <p><em>Uploads can be canceled by invoking the abort method on a jqXHR object:</em></p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>And this is my index.html.erb:</p>
  
  <p>Here, for progress bar and text indications, I put code extracted form <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin#how-to-use-only-the-basic-plugin-minimal-setup-guide" rel="noreferrer">file-upload-basic-plugin</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h2 id="titol"&gt;Upload file&lt;/h2&gt;
  &lt;%= form_for Upload.new, :html =&gt; { :multipart =&gt; true, :id =&gt; "fileupload"  } do |f| %&gt;
    &lt;div class="row fileupload-buttonbar"&gt;
        &lt;%= f.file_field :upload %&gt;
        &lt;button class="cancel"&gt;Cancel upload&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;hr/&gt;
  &lt;% end %&gt;
  
  &lt;div id="videos"&gt;
    &lt;%= render partial: "videos" %&gt;
  &lt;/div&gt;
  
  &lt;!--..........This is necessary even though I don't know why --&gt;
  &lt;script id="template-upload" type="text/x-tmpl"&gt;
  &lt;/script&gt;
  
  &lt;!-- The template to display files available for download --&gt;
  &lt;script id="template-download" type="text/x-tmpl"&gt;
  &lt;/script&gt;
  &lt;!--............................................................... --&gt;
  
  &lt;script type="text/javascript" charset="utf-8"&gt;
  
    $('#fileupload').fileupload({
      dataType: 'json',
      add: function (e, data) {
          data.context = $('&lt;p/&gt;').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 + '%');
        }
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I supose I have to put somthing like this "var xhr = "</p>
  
  <pre><code>  $('#fileupload').fileupload({
      dataType: 'json',
      add: function (e, data) {
          data.context = $('&lt;p/&gt;').text('Uploading...').appendTo(document.body);
          var xhr = data.submit();
      },
      done: function (e, data) {
          data.context.text('Upload finished.');
          $.get('/uploads');
      }
  
    });
  </code></pre>
  
  <p>and then</p>
  
  <pre><code>$(function () {
  
    $('button.cancel').click(function (e) {
      jqXHR.abort();
    });
  
  })
  </code></pre>
  
  <p>but this doesn't work and the code from docs crash everywhere: <code>filesList doesn't exist</code>...etc</p>
  
  <p>Well, I guess I need some basic guidance on jquery or javascript</p>
  
  <p>Thanks in advance</p>