I have recently started working with typescript and I am facing a challenge. I need to remove a specific image from the selected image files array before sending it to an API.
app.component.html
<div class="row">
<div class="col-sm-4" *ngFor="let url of urls;let i=index">
<mat-card class="col-sm-12 mt-2" style="padding:4px">
<div style="display: flex;align-items: center;justify-content: center;">
<img [src]="url" class="img-responsive img1" />
</div>
<div class="col-sm-12" style="margin-top:10px">
<button class="col-sm-12" (click)="removeImage(i)" mat-raised-button color="primary">Remove</button>
</div>
</mat-card>
</div>
</div>
app.components.ts
onSelectFile(event) {
this.urls = [];
this.files= event.target.files; // storing all the images files to the files variable
if (this.files) {
this.showImageBox = true;
for (let file of this.files) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.urls.push(e.target.result);
}
reader.readAsDataURL(file);
}
}
}
removeImage(i){
//Need help removing a specific image from the files array in this method.
}
Using the urls array, I am showing all the selected images to the user. Each image has a remove button next to it. When the user clicks the remove button of an image, I want to remove it from the files array before posting it to the API.