Angular:How to Add/Remove Files in the Angular

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

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.

Angular 2 delete a file from uploaded list of files

Answer to the above problem

remove(file: any){

console.log("delete file:..", file)

var index = this.files.indexOf(file);
this.files.splice(index, 1)

}

Angular 2 How to remove file from files of input type file multiple?

Do you need it to be impossible to choose? Then use HTML Input file accept property. accept="image/png" for instance.

Or you want it to filter from the input after the user selected it?
Then you should use a custom directive or check for the file types in the ts code upon upload.

EDIT
in that case, in your code:

onFileChange(event) {
const fileList = event.target.files;
console.log("User selected fileList:", fileList)
Array.from(fileList).filter(
item => {
console.log("file mime type:", item['type'])
})

const filesToUpload = Array.from(fileList).filter(
item => { return item['type'] != "application/zip" })

console.log("reduced list:", filesToUpload)
}

Working stackblitz example here.

Choose multiple files with a delete button nearby angular

In your html your forgot to add a "let" before f variable

<li *ngFor="let f of files">

In your app.components.ts file, try to use filter not map. this.files.map() isn't filtering out the elements. Console log the output to debug

  removeFile(i: number) {
this.files = this.files.filter(x => x.index != i);
}

How to create multiple file upload button with add and remove button in angular?

You can use ngx dropzone. Using ngx dropzone you can add or drag and drop multiple files in a single time.For using this u can follow the steps in the following link.
https://www.npmjs.com/package/ngx-dropzone



Related Topics



Leave a reply



Submit