Angular Image Array edit with api binding - arrays

Question

I'm stuck in the image array where I can patch image array value in my edit form there can I upload other images or push images that array or delete.
I have a product model where I can have a sub-array where I can trigger edit query or patch value.
onSelectFile(event: any) {
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) => {
console.log("image1",event.target.result);
this.urls.push(event.target.result);
};
reader.readAsDataURL(event.target.files[i]);
}
}
}
<div class="fileupload-wrapper">
<div>
<button class="file-upload-button" type="button" for="custom-fileupload">
<img src="assets/images/icons/file-upload.svg"
alt="file-upload"><span>Upload</span>
<input type="file" accept="image/*;base64," id="file" #file
(change)="onSelectFile($event)" id="custom-fileupload" class="custom-fileupload" multiple />
</button>
</div>
<span class="file-info">
<div *ngFor='let url of urls; let i = index' class="category-wrapper">
<img [src]="sanitizeImageUrl(url)" *ngIf="url" class="categroy-images">
<span (click)="resetCoverValue(i)" class="cross-icon">{{ this.documentName ?
"close" : null }}
<img src="assets/images/icons/blue-cross.svg">
</span>
</div>
</span>
</div>