I am working on file upload component and I want to display the file name list and it should be removable. How to get the file name list in array?
async onUpload(event:Event){
const filesToUpload=(event.target as HTMLInput Element).files; // here I can able to get the
//file names. but don't know how to set that in array
}
and each file should have x symbol(to remove the file). After uploaded the file we can remove it if we don't want it by using the x symbol. How to remove that?
Step 1) Make an API call to your backend to get a collection of files already available, return the relevant data as needed (ex: Filename, URL to where it is stored so that you can download it, whatever else is needed).
Step 2) Add some sot of click listener to whatever element the user clicks (be it a div or a button) to upload said file.
Ex: (in this example I am using Angular Material Table, but the concept is the same if you just an ngFor)
<mat-table #table [dataSource]="tableData" id="reportsRequestedTable">
<button type="button" mat-icon-button (click)="delete(row)"><mat-icon
class="gray">clear</mat-icon></button>
In your delete method you will set its parameter as so:
delete(row: YourFileType) {
//do whatever it is you need to do to delete the file from both front end and backend
Step 3) As far as upload goes; this doc has a good explanation of how to do it. https://blog.angular-university.io/angular-file-upload/ your upload method signature would like so:
async onUpload(event: Change)