title: How to cancel XMLHttpRequest file upload on button click
body: <p>I have a jQuery function that is uploading image files using XMLHttpRequest Object. The form page uses six input files, and the user can select one image file for each input file. After some file is selected in any input file, the jQuery function triggers and starts the file upload.</p>
  
  <p>I am trying to implement cancel buttons so that on each button click the XMLHttpRequest process stop/abort the corresponding image file upload. How can I implement this? </p>
  
  <p>Thanks </p>
  
  <p>The complete code is here:   </p>
  
  <pre><code>$(document).ready(function () {
  
  $.fn.uploadImage = function () {
  
      this.change(function (evt) {
  
          var whichInputFile = evt.target.id
          var whichProgressBar
          var whichProgressLabel
          var whichImage
          var whichAlert
          var whichCancelButton
  
          switch (whichInputFile) {
              case "file_Q1":
                  whichProgressBar = "#prbar1"
                  whichProgressLabel = "#progresslabel1"
                  whichImage = "#image_Q1"
                  whichAlert = "#alert_Q1"
                  whichCancelButton = "#CancelButtonA"
                  break;
              case "file_Q2":
                  whichProgressBar = "#prbar2"
                  whichProgressLabel = "#progresslabel2"
                  whichImage = "#image_Q2"
                  whichAlert = "#alert_Q2"
                  whichCancelButton = "#CancelButtonA"
                  break;
              case "file_Q3":
                  whichProgressBar = "#prbar3"
                  whichProgressLabel = "#progresslabel3"
                  whichImage = "#image_Q3"
                  whichAlert = "#alert_Q3"
                  whichCancelButton = "#CancelButtonB"
                  break;
              case "file_Q4":
                  whichProgressBar = "#prbar4"
                  whichProgressLabel = "#progresslabel4"
                  whichImage = "#image_Q4"
                  whichAlert = "#alert_Q4"
                  whichCancelButton = "#CancelButtonB"
                  break;
              case "file_Q5":
                  whichProgressBar = "#prbar5"
                  whichProgressLabel = "#progresslabel5"
                  whichImage = "#image_Q5"
                  whichAlert = "#alert_Q5"
                  whichCancelButton = "#CancelButtonC"
                  break;
              case "file_Q6":
                  whichProgressBar = "#prbar6"
                  whichProgressLabel = "#progresslabel6"
                  whichImage = "#image_Q6"
                  whichAlert = "#alert_Q6"
                  whichCancelButton = "#CancelButtonC"
                  break;
  
              default:
          }
  
  
          var xhr = new XMLHttpRequest();
          var data = new FormData();
          var files = $(evt.target).get(0).files;
  
          for (var i = 0; i &lt; files.length; i++) {
              data.append(files[i].name, files[i]);
          }
  
          xhr.upload.addEventListener("progress", function (evt) {
              if (evt.lengthComputable) {
                  var progress = Math.round(evt.loaded * 100 / evt.total);
                  $(whichProgressBar).progressbar("value", progress);
              }
          }, false);
  
  
          var url = "http://serverName/mySite/uploadImagesHandler.ashx"
          xhr.open("POST", url);
          data.append("Sel", whichInputFile);
          xhr.send(data);
  
  
          $(whichProgressBar).progressbar({
              max: 100,
              change: function (evt, ui) {
                  $(whichProgressLabel).text($(whichProgressBar).progressbar("value") + "%");
              },
              complete: function (evt, ui) {
                  $(whichProgressLabel).text("Image uploaded successfully!");
              }
          });
  
  
          xhr.onreadystatechange = function () {
  
              if (xhr.readyState == 4) { //Property readyState == 4 (request finished and response is ready). 
  
                  if (xhr.responseText == "0") {
                      xhr.abort
                      $(whichProgressBar).progressbar({ value: 0 })
                      $(whichProgressLabel).text("Error. Check messages.");
                      $(whichAlert).text("User's Session expired.");
  
                  } else {
                      if (xhr.responseText == "1") {
                          xhr.abort
                          $(whichProgressBar).progressbar({ value: 0 })
                          $(whichProgressLabel).text("Error. Check messages.");
                          $(whichAlert).text("Product Image: The image format is invalid, must be JPG or JPEG.");
  
                      } else {
                          if (xhr.responseText == "2") {
                              xhr.abort
                              $(whichProgressBar).progressbar({ value: 0 })
                              $(whichProgressLabel).text("Error. Check messages.");
                              $(whichAlert).text("Product Image: The image size is too large, should be 15 MB maximum.");
                          } else {
  
                              if (xhr.status == 200) { //Property status == 200 ("OK").
                                  $(whichProgressLabel).text("Image uploaded successfully.");
                                  $(whichImage).attr("src", xhr.responseText);
                                  $(whichAlert).text("");
  
                              } else {
                                  $(whichProgressLabel).text("An error occurred.");
                                  $(whichAlert).text("");
                              }
  
                          }
                      }
                  }
  
  
              }
  
  
          }
  
  
          evt.preventDefault();
      });
  
  }
  
  $("#file_Q1, #file_Q2, #file_Q3, #file_Q4, #file_Q5, #file_Q6").uploadImage();
  </code></pre>
  
  <p>});</p>
  
  <p>thanks</p>