Angular 2 How to remove file from files of input type file multiple?

Issue

How to remove specific file from files selected with input type with multiple attribute?

<input type="file" (change)="onFileChange($event)" #fileInput multiple>

enter image description here

I want to delete one of the selected file.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

https://jsfiddle.net/Sagokharche/eL3eg6k4/

Solution

Do you need it to be impossible to choose? Then use HTML Input file accept property. accept="image/png" for instance.

Or you want it to filter from the input after the user selected it?
Then you should use a custom directive or check for the file types in the ts code upon upload.

EDIT
in that case, in your code:

onFileChange(event) {
    const fileList = event.target.files;
    console.log("User selected fileList:", fileList)
    Array.from(fileList).filter(
      item => {
        console.log("file mime type:", item['type'])
      })

    const filesToUpload = Array.from(fileList).filter(
      item => { return item['type'] != "application/zip" })

    console.log("reduced list:", filesToUpload)
  }

Working stackblitz example here.

Answered By – ForestG

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.