I'm facing an issue with dynamically added input files in Angular. Whenever I upload a file, it changes all the images of the input files instead of just the one I want to target. How can I resolve this problem? Please help.
images = [
{url: 'assets/images/icons/ico_upload.svg'},
{url: 'assets/images/icons/ico_cel.svg'}
];
img = this.images[0];
imgVisible = true;
fileChangeEvent(event: any, keyName): void {
this.imageChangedEvent[keyName] = event;
if(event.target.files.length > 0)
{
console.log(event.target.files[0].name);
this.img = this.images[1];
}else{
this.img = this.images[0];
}
}
html code:
<form [formGroup]="filterForm" class="filter-form" (ngSubmit)="Submit()">
<ng-container *ngFor="let item of questions2 ">
<div *ngSwitchCase="'file'" >
<div class="file">
<span class=ellipsis matTooltip="{{item.des}}">{{item.des}}</span><br />
<img [src]="img.url">
<label>
<input type="file" class="file-upload" (change)="fileChangeEvent($event,'sample')">
</label>
</div>
</div>
</ng-container>
</form>