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


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.


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.

in that case, in your code:

onFileChange(event) {
    const fileList =;
    console.log("User selected fileList:", fileList)
      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.