cant append displayed image to formdata in angular

I am having an issue on updating media for each hotel if user select controller and changes image or video its works if user does not change the hotel media and modifies other fields its showing an error like "deal.service.ts:466 ERROR TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'."

this is update.html it displaying correct image or video

<div class="col-sm-9">

<input type="file" class="form-control" id="image{{ i }}-{{ j }}" accept="image/*,video/*"
(change)="onMediaChange($event, i, j)" />


<input type="text" class="form-control mt-2" placeholder="Enter alt text" formControlName="altText"
id="altText{{ i }}-{{ j }}" />


<div *ngIf="mediaPreview?.[j]?.type === 'image'">
<img *ngIf="mediaPreview[j]?.src" [src]="mediaPreview[j].src" alt="Image preview"
style="max-width: 250px; max-height: 150px;" />

</div>


<div *ngIf="mediaPreview?.[j]?.type === 'video'">
<video *ngIf="mediaPreview[j]?.src" [src]="mediaPreview[j].src" controls
style="max-width: 250px; max-height: 150px;">
</video>

</div>
</div>


</div>


here this is submit code

submitDeal(dealId: number): void {
const formData = { ...this.dealUpdateForm.value };
console.log("Deal Update Form Value:", this.dealUpdateForm.value);

delete formData.imageUrl;
delete formData.videoUrl;
delete formData.hotels.media;
if (this.dealUpdateForm.valid && this.Updatehotels.length > 0) {
const url = `${this.updateDealEndpoint}?dealId=${dealId}`;

this.http.put(url, formData).subscribe({
next: (response: any) => {
console.log("Response from API:", response);
const hotelIds = response.hotels?.map((hotel: any) => hotel.hotelId) || [];
console.log("Extracted Hotel IDs:", hotelIds);

for (let i = 0; i < hotelIds.length; i++) {
console.log(`Hotel ID at index ${i}: ${hotelIds}`);
}

hotelIds.forEach((hotelId: number, index: number) => {
this.updateHotelMedia(hotelId, index);
});

alert('Deal Updated successfully!');
},
error: (error) => {
console.error('Error from API:', error);

},
});
} else if (this.Updatehotels.length === 0) {
this.hotelWarningSubject.next('At least one hotel is required.');
} else {
this.dealUpdateForm.markAllAsTouched();
}
}


updateHotelMedia(hotelId: number, hotelIndex: number): void {
const formData = new FormData();

const mediaArray = this.getUpdateMedia(hotelIndex).controls;
mediaArray.forEach((media: any, mediaIndex: number) => {
const mediaFile = media.get('mediaFile')?.value;
const altText = media.get('altText')?.value;

if (mediaFile) {
formData.append(`Medias[${mediaIndex}].MediaFile`, mediaFile, mediaFile.name);
}
if (altText) {
formData.append(`Medias[${mediaIndex}].Text`, altText);
}
});

const mediaUpdateUrl = `https://localhost:5001/api/hotels/files?hotelId=${hotelId}`;


this.http.put(mediaUpdateUrl, formData).subscribe({
next: () => {
console.log(`Media updated successfully for hotelId: ${hotelId}`);
},
error: (error) => {
console.error(`Failed to update media for hotelId: ${hotelId}`, error);
},
});
}

}


this is how iam updating if user change the media its workig

onMediaUpdateFileSelected(event: Event, hotelIndex: number, mediaIndex: number): void {
const input = event.target as HTMLInputElement;
if (input.files && input.files.length > 0) {
const file = input.files[0];

const formUpdateGroup = this.getUpdateMedia(hotelIndex).at(mediaIndex);

if (file) {

formUpdateGroup.get('mediaFile')?.setValue(file);
formUpdateGroup.get('mediaFileName')?.setValue(file.name);
}
}
}


this is the onchange method

I tried convert to blob on oninit but it did not work out

Continue reading...