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
Get Count of True Values in Json With JavaScript
Bootstrap Modal Only Showing Backdrop
Disabled Button Onclick Event Fires
How to Resolve Position:Fixed for a Bottom Toolbar on iOS (Iphone/Ipad)
Regular Expression Which Matches a Pattern, or Is an Empty String
Javascript Loop Wait Until API Call Finished
How to Intercept Button Click Inside Uiwebview on Ios
How to Move the Mouse Pointer and Click With Selenium Webdriver JavaScript
Owl Carousel, Navigation Disabled After Reaching First/Last Item
Why Am I Getting Undefined as an Answer When Fetching Data from an API
Using Ajax to Post a Variable to Another PHP File
Focus Next Input Once Reaching Maxlength Value
Javascript Ajax Not Working on ASP.NET C# and Returns a 404
How to Pass Arguments to Addeventlistener Listener Function
Filereader Onload With Result and Parameter
Adding Script Tag to React/Jsx
How to Hide the Android Keyboard Using JavaScript
Callback Function Cannot Access Variable Within Parent Function'S Scope