I am trying to reset the input type file value after user click on delete button using Angular so that user can upload same file again after deletion but as per my code its not working. I am explaining my code below.
<label [for]="'file' + i" style="width: 100%;cursor: pointer;text-align: center;">
<div id="drop_zone" (drop)="dropPayLoad($event, i, fileType.CONFIG_FILE)" (dragover)="allowPayloadDrop($event, i, fileType.CONFIG_FILE)">
<span class="pat-span">{{fileLableArr[i]['config_name']}}</span>
<input type="file" hidden [id]="'file' + i"
(change)="handleUploads($event.target.files, fileType.CONFIG_FILE, i)">
<span *ngIf="fileLableArr[i]['isConfig']" style="position: relative;top: 6px;left: 5px;font-size: 31px;"
(click)="$event.preventDefault();deleteUploadedFile($event, fileType.CONFIG_FILE, i)">×</span>
</div>
</label>
Here I have file inputs inside one table and after uploading file user can delete that file. Here my issue after deletion of that file if user need to upload same file again then it is not happening. So in this case file input need to be clear. By google search added code like (click)="this.value = null" but it did not work. Here at the time of deletion the file input should be reset so that user will able to upload same file again. please try to help me resolve this issue.
Clear he value in the handleUploads method itself.
Modify you handleUploads like this, pass other params as per your code:
handleUploads(event) {
// Get your files
const files: FileList = event.target.files;
// do whatever you want with the files
// At the end clear the input
event.target.value = null;
}