angular 8 multiple file upload example delete function in angular 8 remove selected file from input type=file angular.angular file upload how to delete image in angular angular remove item from array angular save file to folder remove uploaded file in angular. I have create new project in angular and upload multiple files and remove uploaded images using angular 8 as given below.
Open your html view page and past this code as given below
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2 productAddfromImages" *ngFor='let url of imageurls; let i = index'>
<img class="img-fluid" [src]="url.base64String">
<a (click)="removeImage(i)" class="btn btn-xs btn-danger">Remove</a>
</div>
</div>
</div>
<div class="card main-title">
<div class="col-md-12">
<div class="form-group">
<br>
<label class="form-label">Add Images</label>
<input type="file"
class="form-control"
(change)="onSelectFile($event)"
multiple accept="image/*" />
</div>
</div>
</div>
</div>
</div>
After that open your .ts file and add this code as given below
import { Component} from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
templateUrl: './multiple-images-add.component.html', //this is your html page path
styleUrls: ['./multiple-images-add.component.css'] //this is your css file path
})
export class MultiImageUpload {
imageDeleteFrom: FormGroup;
imageurls =[];
base64String: string;
name: string;
imagePath: string;
removeImageEdit(i, imagepath) {
this.imageDeleteFrom.value.id = i;
this.imageDeleteFrom.value.ImagePath = imagepath;
}
removeImage(i) {
this.imageurls.splice(i, 1);
}
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]);
}
}
}
}
Download full Poject :- https://github.com/sundarneupane/Angular-Multiple-Image-Upload
Comments