Upload file does not accept the same file twice after i delete it

Question

Im trying to upload a file with this code

onDrag(event:any) {
console.log(this.toUpload);
 if(this.toUpload.length >0){
   this.error = "Only one file at the time is accepted";
  }else{
    let fileName = event[0].name;
    let split = fileName.split(".");
    let ext = split[split.length - 1].toLowerCase();
    if(ext !="xlsx" && ext!="xls" ){
    this.error = "Only xls or xlsx files are supported";
  }else{
    if(event[0].size > 28000000){
      this.error = "the file is too big"
    }else{
      this.toUpload.push(event[0]);
      this.error = null;
    }
  }
}
console.log(this.toUpload);
}



<div class="dropzone my-3"
(click)="fileInput.click()" appDragdrop (onFileDropped)="onDrag($event)">
  <input hidden accept=".xls,.xlsx" type="file" #fileInput (change)="onDrag($any($event).target.files);">
  <img src="assets/img/dnd/ic-upload-file.svg" alt="" />
  <h3>Aggiungi Registro</h3>

Sfoglia...

and i have 2 problems

the first one and less important is that the drag and drop doesn't works

The one i really need to solve is that if i select a file trough navigate files, choose the File.xlsx and press on the delete button it gets correctly deleted from the event[], but i can't upload the same file again. If i change file it works, as long as i don t delete it When this happen i can't even reach the first console.log(), so it basically doesn't get inside the method

When i refresh the page evrything works again

when uploded properly the file gets sent to the backend and processed properly... so I don t think it's a file related problem

what can i do?

Answer 1

this solution works for me, after removing an element from the queue you need to clear the input value.

ts file

 @ViewChild('fileInput', {static: false}) fileInput: ElementRef;



deleteFromArray(index) {
this.fileInput.nativeElement.value = null;
...

}