Video not displaying after refreshing in angular

i am updating the video and image in my update form when image or video selected after updating page refresh but video not displaying if i go back and refresh and come updated video appearing (Angular 17) this is my code

updateVideo(dealId: number, event: any): void {
if (dealId && event == null) {
const formData = new FormData();
formData.append('VideoFile', event);
this.http.put(`https://localhost:5001/api/Deals/updatevideo?dealId=${dealId}`, formData)
.subscribe({
next: () => {
setTimeout(() => {
this.fetchDealData(dealId);
window.location.reload();
}, 3000);
// alert('Video removed successfully.');
},
error: (err) => {
console.error('Error removing video:', err);
alert('Failed to remove video. Please try again.');
}
});
console.log(dealId);
}
if (dealId && event != null) {
const formData = new FormData();
formData.append('VideoFile', event);
this.http.put(`https://localhost:5001/api/Deals/updatevideo?dealId=${dealId}`, formData)
.subscribe({
next: () => {
setTimeout(() => {
this.fetchDealData(dealId);
window.location.reload();
}, 3000);
// this.dealUpdateForm.patchValue({ videoUrl: '' });
alert('Video Updated successfully.');
},
error: (err) => {
console.error('Error updating video:', err);
alert('Failed to update video. Please try again.');
}
});
console.log(dealId);
}
}


these functions are working but i have go back refresh and comeagain to get the updated results

i have added interval once it has no time to fetch the updated details

here this is my html code to display video

<div class="mb-2 row align-items-center">
<label for="dealVideo" class="col-sm-3">Deal Video</label>
<div class="col-sm-9">
<div>
<video
*ngIf="dealUpdateForm.get('videoUrl')?.value"
[src]="api+dealUpdateForm.get('videoUrl')?.value"
controls
class="rounded"
style="max-width: 2500px; max-height: 250px;"
accept="video/*"

></video>
<button *ngIf="dealUpdateForm.get('videoUrl')?.value" type="button" class="btn btn-link text-danger" (click)="removeVideo(dealUpdateForm.get('id')?.value, null)">Remove</button>
</div>
<div>
<input class="form-control" formControlName="videoUrl" (change)="FileSelected(dealUpdateForm.get('id')?.value,$event)" type="file" accept="video/*" />
</div>
</div>
</div>

Continue reading...