title: Abort AJAX request on button click
body: <p>I want to abort my AJAX file upload, using XML abort function.</p>
  
  <p>Below is script (jQuery), showing my AJAX request call:</p>
  
  <pre><code>var jqXHR = new window.XMLHttpRequest();
  $("#file_uploading").change(function(e) {
      var fullPath = $('#File-upload-0').val();    
      var output = fullPath.substr(0, fullPath.lastIndexOf('.')) || fullPath;
      var filename = output.replace(/^.*\\/, "");
      $('#cancel_btn').removeClass('hidden');
      //console.log(filename);
      $('#f_name').val(filename);
      $('#reupload_block_cl').addClass('alert-success').removeClass('alert-danger');
      $('#loader').removeClass('hidden');
      e.preventDefault();
      $.ajax({
          url: window.reuploading_file,
          type: "POST",
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData: false,
          success: function(data) {
              //alert(data.success);
              if (data.success) {
                  $('#cancel_btn').addClass('hidden');
                  $('#loader').addClass('hidden');
                  $('#reupload_block_msg').html(data.success);
                  $('#reupload_block').removeClass('hidden');
              }
          }, 
          error: function(data) {
              //alert(data.success);
              var obj = jQuery.parseJSON(data.responseText);
              var str = obj['file'][0];
              if (str.startsWith("The file may not be greater than")) {
                  $('#loader').addClass('hidden');
                  $('#cancel_btn').addClass('hidden');
                  $('#reupload_block_msg').html(str);
                  $('#reupload_block_cl').addClass('alert-danger')
                      .removeClass('alert-success');
                  $('#reupload_block').removeClass('hidden');
              } else {
                  $('#loader').addClass('hidden');
                  $('#cancel_btn').addClass('hidden');
                  $('#reupload_block_msg').html(str);
                  $('#reupload_block_cl').addClass('alert-danger')
                      .removeClass('alert-success');
                  $('#reupload_block').removeClass('hidden');
              }
          }           
      });
  });
  </code></pre>
  
  <p>and on the cancel button click, what I want to achieve is: to abort AJAX request.</p>
  
  <p>Below is my cancel button click function script (jQuery) which is not working as expected:</p>
  
  <pre><code>$('#final_upload').on('click', function() {
      jqXHR.abort();
      $('#loader').addClass('hidden');
  });
  </code></pre>
  
  <p>What am I doing wrong and how can I resolve it?</p>