How to Remove One Specific Selected File from Input File Control

How to remove one specific selected file from input file control

As other people pointed out, FileList is read only. You can get around this by pushing those files into a separate Array though. You can then do whatever you want with that curated list of files. If uploading them to a server is the goal, you can use the FileReader API.

Below is a round about way of completely avoiding needing to modify the FileList.
Steps:

1. Add normal file input change event listener
2. Loop through each file from change event, filter for desired validation
3. Push valid files into separate array
4. Use FileReader API to read files locally
5. Submit valid, processed files to server

Event handler and basic file loop code:

var validatedFiles = [];
$("#fileToUpload").on("change", function (event) {
  var files = event.originalEvent.target.files;
  files.forEach(function (file) {
    if (file.name.matches(/something.txt/)) {
      validatedFiles.push(file); // Simplest case
    } else { 
      /* do something else */
    }
  });
});

Below is a more complicated version of the file loop that shows how you can use the FileReader API to load the file into the browser and optionally submit it to a server as a Base64 encoded blob.

  files.forEach(function (file) {
    if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side
      var reader = new FileReader();
      // Setup listener
      reader.onload = (function (processedFile) {
        return function (e) {
          var fileData = { name : processedFile.name, fileData : e.target.result };

          // Submit individual file to server
          $.post("/your/url/here", fileData);

          // or add to list to submit as group later
          validatedFiles.push(fileData);
        };
      })(file);

      // Process file
      reader.readAsDataURL(file);
    } else { 
      /* still do something else */
    }
  });

A note of caution about using FileReader API. Base64 encoding a file will increase its size by around 30%. If that isn't acceptable you will need to try something else.

How to remove certain file from multiple input type=file?

According to my understanding, I don't think you could remove the file from your file list. The file's data in files is read-only, so I recommend you use multiple <input type="file"> for adding file instead of <input type="file" multiple>, so that you can easily remove the specific file with the simple remove button (clear the value of the file input). It may be inconvenient for the user, but it works in your case I think.

========Update

Instead of using <input type="file" multiple>. You can use the alternative way like this. You can take a look of this

Hope it would help. Please correct me if I were wrong

Remove a FileList item from a multiple input:file

I' am afraid that you cannot delete objects from FileList object directly. Just assign $('input:file#upload')[0].files to an Array and then remove items from that array using splice or method of your choice and then use that Array.

Need to remove specific file from html file input with multiple selection enabled

Unfortunately you can't remove a file from that list because they are stored in a read-only FileList object: https://developer.mozilla.org/en-US/docs/Web/API/FileList

As an alternative you can keep your own array of files, but then you will need to use your own implementation to upload the files.

There is a similar question that was asked a few years ago but it is still valid:
How do I remove a file from the FileList - There is an answer that uses XMLHttpRequest to manually upload the files.

How to remove selected file name at input type=“file” by function in angular 4?

Just reset the value to empty for that element. Like below -

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>
<button type="button" (click)="reset(fileInput)">Reset</button>

reset(element) {
    element.value = "";
}

Working Example

---

Related Topics