Angular : remove one item in filelist?


Here i choose multiple images and shows using *ngFor And there I have placed a delete button which is appear in the screenshot, click on delete button i want to delete chosen image from chosen list i tried below code but i not getting proper solution.

<a href="https://i.stack.imgur.com/G5h2Q.png" rel="nofollow"><img alt="This is My UI sceenshot" class="b-lazy" data-src="https://i.stack.imgur.com/G5h2Q.png" data-original="https://i.stack.imgur.com/G5h2Q.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>


<button mat-raised-button (click)="fileInput.click()">Select File</button> <input style="display: none" type="file" (change)="onFileChanged($event)" #fileInput multiple="true"> <div *ngFor="let selected of selectedFile;let index = index"> <h3>{{selected.name}}</h3> <button mat-icon-button (click)="removeSelectedFile(index)">delete</button> </div>


selectedFile: File; ArrayOfSelectedFile = new Array<string>(); onFileChanged(event : any) { this.ArrayOfSelectedFile= []; this.selectedFile = event.target.files; this.ArrayOfSelectedFile.push(event.target.files); } removeSelectedFile(index){ this.ArrayOfSelectedFile.splice(index,1); }


HTML Code:

<button mat-raised-button (click)="fileInput.click()">Select File</button> <input style="display: none" #attachments type="file" (change)="onFileChanged($event)" #fileInput multiple="true"> <div *ngFor="let selected of listOfFiles;let index = index"> <h3>{{selected}}</h3> <button mat-icon-button (click)="removeSelectedFile(index)">delete</button> </div>

And TS code:

Import this:

import { Component, OnInit, Inject, ViewChild } from '@angular/core';

And Inside your component class:

@ViewChild('attachments') attachment: any; selectedFile: File; fileList: File[] = []; listOfFiles: any[] = []; onFileChanged(event: any) { for (var i = 0; i <= event.target.files.length - 1; i++) { var selectedFile = event.target.files[i]; this.fileList.push(selectedFile); this.listOfFiles.push(selectedFile.name) } this.attachment.nativeElement.value = ''; } removeSelectedFile(index) { // Delete the item from fileNames list this.listOfFiles.splice(index, 1); // delete file from FileList this.fileList.splice(index, 1); }

If you notice that the Deleted file is not available for upload again for that I have used @ViewChild to reset the value = '', then you can select the deleted file again.

Here is a working <a href="https://stackblitz.com/edit/angular-h8cx2r" rel="nofollow">StackBlitz</a> example.


You can check this <a href="https://stackblitz.com/edit/angular-nafjup" rel="nofollow">Multiple file upload delete</a>, let me know if you want any clarification on same.


event.target.files is already an array, which is why you can iterate over it with ngFor. When you assign selectedFile = event.target.files, you are making it an array. Try this:

selectedFile: File; ArrayOfSelectedFile = new Array<string>(); onFileChanged(event : any) { this.selectedFile = event.target.files[0]; this.ArrayOfSelectedFile = event.target.files; } removeSelectedFile(index){ this.ArrayOfSelectedFile.splice(index,1); } <div *ngFor="let selected of ArrayOfSelectedFile;let index = index"> <h3>{{selected.name}}</h3> <button mat-icon-button (click)="removeSelectedFile(index)">delete</button> </div>


You should remove it from a selectedFile array.

this.selectedFile.splice(index, 1);


  • Algorithm for sorting a list of objects in c#
  • jQuery ui.combobox and asp.net web forms autopostback
  • Get All IP and Mac Address in lan
  • Share Application Through Facebook, Twitter, Email, and Messaging Only
  • How to send the client id and secret id of OAuth2 using Angular 2?
  • React Native - FlatList with dynamic height children
  • E: Malformed entry 1 in list file /etc/apt/sources.list.d/sbt.list (Suite)
  • why 'read' command in shell script is missing initial characters? [duplicate]
  • Get the UTM tags with Facebook Marketing API
  • Laravel 5 - Cache remember doesn't work
  • Network communication options in Java (Client/Server)
  • mssql script data insert or update
  • Extracting a small subset of data from XMLs
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • Request Access Token in Postman for Azure Function App protected by Azure AD B2C
  • ASP.NET MVC 2 actions for the same route?
  • how to specify different css for ie
  • Regex not working in java 1.5
  • Java .policy file - how to prevent java.util.Date() from being accessible
  • How to create subsets of a single set of elements with XSLT?
  • Possible to set default CloudKit container not based on application name?
  • Create an average of multiple excel chart without the data source
  • Rotating Towards Path in OpenGL
  • concise way of flattening multiindex columns
  • How convert html to BBcode in C#
  • gnuplot - How to make zmin equal to zmax keeeping autoscale on z axis
  • how to run ejabberd with Erlang on Heroku?
  • How to use Streams api peek() function and make it work?
  • Change cell value based on cell color in google spreadsheet
  • Android: Unable to detect vertical plane
  • Using redis as an LRU cache for postgres
  • `$http:badreq Bad Request Configuration` - from angular post method, what is wrong here?
  • How to decleare char *const argv[] in swift [duplicate]
  • Bad automatic Triangulation with Mayavi for coloring a surface known only by its corner
  • How to get rgb from transparent pixel in js
  • ssh remote server login script
  • WPF custom control and direct content support
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web