CODEWITHSUNDEEP
javascriptangular
Dharmesh
Dharmesh

Reputation: 6003

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

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.

This is My UI sceenshot

add.component.html

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

add.component.ts

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);
}

Upvotes: 7

Views: 36558

Answers (6)

Ayesha
Ayesha

Reputation: 311

There are two better ways to achieve this if you want to avoid explicit for loop.

1- Using spread operator:

    ArrayOfSelectedFile: File[] =[];

    onFileChanged(event : any) {
      this.ArrayOfSelectedFile = [...event.target.files];
    }

    removeSelectedFile(index){
      this.ArrayOfSelectedFile.splice(index,1);
    }

event.target.files is FileList object. To remove a file from a JavaScript FileList is to use the spread operator to convert the FileList to an array. And in removeSelectedFile function, you can use splice function to remove an element of particular index.

2- Using Array.from method:

ArrayOfSelectedFile: File[] =[];

onFileChanged(event : any) {
  this.ArrayOfSelectedFile = Array.from(event.target.files);
}

removeSelectedFile(index){
  this.ArrayOfSelectedFile.splice(index,1);
}

Upvotes: 0

Sundar
Sundar

Reputation: 140

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

Upvotes: 0

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

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.

Upvotes: 18

Victor Rodniansky
Victor Rodniansky

Reputation: 513

You should remove it from a selectedFile array.

this.selectedFile.splice(index, 1);

Upvotes: 0

R. Viral
R. Viral

Reputation: 396

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

Upvotes: 0

Bm8
Bm8

Reputation: 33

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>

Upvotes: 0

Related Questions