CODEWITHSUNDEEP
javascriptjqueryhtmlfile-upload
Matt
Matt

Reputation: 209

Remove selected file(s) by clicking the remove link from the input file multiple

My current code can only remove the files from the HTML client slide, but not the actual file list. Meaning, even the file is remove visually, but when I upload it, the file is still remains uploaded.

What can I do to upload from the file list so that removed file will not upload once I hit the button Upload?

Upvotes: 2

Views: 2080

Answers (1)

Randy Casburn
Randy Casburn

Reputation: 14165

An HTMLInputElement with type="file" produces a FileList object that contains the list of files. The FileList object is a read only object that cannot be modified.

So while you can remove the file from your custom list array and use the shorted list to build your UL, you cannot modify the FileList that is a property of the HTMLInputElement.

So, the solution is to create a new FormData() object, populate that with your form elements, and then append the list of files to the form element individually.

Something like this should work:

var formData = new FormData();
var fileList = [];
var fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', setList);
document.querySelector('form').addEventListener('submit', sendModifiesList);

function setList() {
  //Convert the FileList Object to an Array of File Objects
  fileList = Array.from(fileInput.files);
  outputList();
}


function sendModifiesList(e) {
  e.preventDefault();
  fileList.forEach(function(file) {
    formData.append('fileList[]', file);
  });
  console.log("These files will be posted: ", formData.getAll("fileList[]"));
  /*************** EDIT *************************/
  // Get the url from the form's action attribute
  let url = document.forms[0].action;
  let request = new XMLHttpRequest();
  // Create a POST request
  request.open("POST", url);
  // Set up an onload handler to report status
  request.onload = function() {
    if (request.status == 200) {
      console.log("Uploaded!");
    } else {
      console.log("Error " + request.status + " occurred when trying to upload your file.");
    }
  };
  // Send the form to the server 
  request.send(formData);
  /************ END EDIT ***********************/
};

function outputList() {
  var output = document.getElementById('fileList');
  var nodes = document.createElement('ul');
  fileList.forEach((file, i) => {
    var node = document.createElement('li');
    var filename = document.createTextNode(file.name);
    var removeLink = document.createElement('a');
    removeLink.href = 'javascript:void(0)';
    removeLink.innerHTML = 'Remove';
    removeLink.onclick = function() {
      // Remove item
      fileList.splice(i, 1);
      outputList();
    }
    node.appendChild(filename);
    node.appendChild(removeLink);
    nodes.appendChild(node);
  });
  output.innerHTML = '';
  output.appendChild(nodes);
}
<form action="/test.aspx">
  <input type="file" multiple>
  <input type="submit">
</form>
<div id="fileList"></div>

Upvotes: 1

Related Questions