Cancel one file to upload jQuery

Question

With id="cancel_upload" I want to delete one file in the queue to upload with jQuery, is there a way to do this? this is my code:

$("#files").on("change", function() {
  var fp = $("#files");
  var lg = fp[0].files.length;
  var items = fp[0].files;
  var fragment = "";

  if (lg > 4) {
    alert('Upload maksimal 4 file!');
    return false;
  } else {
    $("#list_file").show();
    for (var i = 0; i < lg; i++) {
      var fileName = items[i].name;
      var fileSize = items[i].size;

      fragment +=  '<div class="item">' + '<a class="ui label">' + "(" + formatFileSize(fileSize) + ") " + fileName + '<i class="delete icon" id="cancel_upload"></i>' + "</a>" + "</div>" + "<br>";
    }

    $("#list_file").append(fragment);
    $("#files").prop('disabled', true);
  }
});

$("cancel_upload").on('click', function() {
  fileName.abort();
});

Answer 1

Try something like

 var ajaxCalll; $("#files").on("change", function() { var fp = $("#files"); var lg = fp[0].files.length; var items = fp[0].files; var fragment = ""; if (lg > 4) { alert('Upload maksimal 4 file!'); return false; } else { $("#list_file").show(); for (var i = 0; i < lg; i++) { var fileName = items[i].name; var fileSize = items[i].size; fragment += '<div class="item">' + '<a class="ui label">' + "(" + formatFileSize(fileSize) + ") " + fileName + '<i class="delete icon" id="cancel_upload"></i>' + "</a>" + "</div>" + "<br>"; } $("#list_file").append(fragment); $("#files").prop('disabled', true); // assign AJAX Call to ajaxCalll variable } }); $("#cancel_upload").on('click', function() { ajaxCalll.abort(); }); 

Hope this will help you.