Same image not uploading second time after deletion locally angular-CodePudding

I'm trying to delete the image locally

 <input type="file" id="profileUrl" (change)="PicUpload($event)" name="profilePic">


PicUpload(e): void {
    this.imageChangedEvent = e;
    this.image  = e.target.files[0];
  }

For preview:

 <img [attr.src]="user.photo" />

When i delete this image not from server locally

removePic(photo) {
      this.user.photo = '/assets/images/default-profile.png';
      this.fileName = '';
      this.image = '';
      this.imageChangedEvent = '';
      document.getElementById("profileUrl").innerHTML = " ";
    }

then when i try to upload the same image again it does not show it in preview i have to upload another one before uploading that image then it shows in preview . Image preview is in base64 format

Any solution Thanks

CodePudding user response：

You can try:

<input #profileUrl type="file" id="profileUrl" (change)="PicUpload($event)" name="profilePic">

In ts file:

@ViewChild('profileUrl') profileUrl;

removePic(photo) { 
  ...
  this.profileUrl.nativeElement.value = '';
}