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 delete chosen image from chosen list i tried below code but i not getting proper solution.

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

if you add console.log(this.ArrayOfSelectedFile) after the splice method, does the element got removed ? — SeleM
– SeleM, Commented Nov 29, 2018 at 10:28

Prashant Pimpale · Accepted Answer · 2020-09-10 05:03:21Z

18

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.

edited Sep 10, 2020 at 5:03

answered Nov 29, 2018 at 10:49

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sai Manoj Over a year ago

Instead of using multiple, can we add a button to add a new file with description? Like it should be iterate n number of times when you click on a button. Can we get this scenario done using reactive forms with validation?

Prashant Pimpale Over a year ago

@SaiManoj need more clear idea, can you post a question with details, demo?

Sai Manoj Over a year ago

let me do that and will tag it here. Will make a sample stackblitz too for a brief

Prashant Pimpale Over a year ago

@SaiManoj sure also you can mail me the question link..my mail id given in my Prof info

Sai Manoj Over a year ago

Here is the link for question

Bm8 · Accepted Answer · 2018-11-29 10:47:18Z

0

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>

answered Nov 29, 2018 at 10:47

Bm8

333 bronze badges

2 Comments

Dharmesh Over a year ago

i got error this.ArrayOfSelectedFile.splice is not a function

Bm8 Over a year ago

this.ArrayOfSelectedFile = event.target.files as string[];

R. Viral · Accepted Answer · 2018-11-29 11:04:35Z

0

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

answered Nov 29, 2018 at 11:04

R. Viral

3961 silver badge6 bronze badges

7 Comments

Prashant Pimpale Over a year ago

Try to upload deleted file again and then check!

Prashant Pimpale Over a year ago

@DDD Have you test this--> Try to upload deleted file again

R. Viral Over a year ago

@PrashantPimpale its working like new upload, if you want append then you need to remove this.fileList = [] from fileUpload() and loop event.target.files and push it into this.fileList

R. Viral Over a year ago

@DDD its working from your side? or need any modification

Dharmesh Over a year ago

@R.Viral its working like new upload i want to append new images so can you modify answer for that

|

Prashant Pimpale · Accepted Answer · 2019-02-14 04:52:41Z

0

You should remove it from a selectedFile array.

this.selectedFile.splice(index, 1);

edited Feb 14, 2019 at 4:52

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Nov 29, 2018 at 10:35

Victor Rodniansky

5133 silver badges13 bronze badges

3 Comments

Dharmesh Over a year ago

@VictoryRodniansky selectedFile type is File so it shows error like this [ts] Property 'splice' does not exist on type 'File'

Victor Rodniansky Over a year ago

Maybe I am missing something but could you write in html: <div *ngFor="let selected of ArrayOfSelectedFile;let index = index">

Arthur Silva Over a year ago

@DDD in your case selectedFile is not of type File, but FileList.

Sundar · Accepted Answer · 2020-10-10 15:23:25Z

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

Ayesha · Accepted Answer · 2021-09-07 07:07:21Z

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

Collectives™ on Stack Overflow

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

6 Answers 6

5 Comments

2 Comments

7 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

7 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related