Angular : How to Add/Remove Files in the Angular?

Question

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

Answer 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;

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 StackBlitz example.

Answer 2

You can check this Multiple file upload delete, let me know if you want any clarification on same.

Answer 3

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>

Answer 4

You should remove it from a selectedFile array.

this.selectedFile.splice(index, 1);

Answer 5

In your html code

 <label class="form-label">Add Images</label>
      <input type="file"
             class="form-control"
             (change)="onSelectFile($event)"
             multiple accept="image/*" />
    </div>

//this is your ts code

onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
  var filesAmount = event.target.files.length;
  for (let i = 0; i < filesAmount; i++) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.imageurls.push({ base64String: event.target.result, });
     }
    reader.readAsDataURL(event.target.files[i]);
    }
  }
 }

For more details:https://findandsolve.com/articles/how-to-upload-and-remove-multiple-image-using-anular-code-example