Choose multiple files with a delete button nearby angular


Introduction: I have a table where in a column it consists of an option to choose or upload files as an input to the table. I have written code in such a way that I can choose multiple files all at once.

My problem
What I want is that after I choose those multiple files(lets say 3 for an example), I need a x or a close symbol or a delete button near the filename. So that When I click that I could unchoose or unselect or delete the particular file alone. I am attaching a sample image of how I want.

And please tell me if there is any way to remove list values by index


Kindly comment below if my question is unclear

My html code:

     <input style="width:240%" type="file" id="file" multiple
         (change)="getFile($event)" >

My ts code:

myFiles:string [] = [];
getFile (e) {
for (var i = 0; i <; i++) { 

I have also attached my stackblitz below for your reference:



In your html your forgot to add a "let" before f variable

<li *ngFor="let f of files">

In your app.components.ts file, try to use filter not map. isn’t filtering out the elements. Console log the output to debug

  removeFile(i: number) {
   this.files = this.files.filter(x => x.index != i);

Answered By – Eriks

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.