How to upload the SAME file in angular4

Question

I was able to successfully upload a file, but the problem now is it won't let me upload the same file twice. Here's my code:

 <input type="file" (change)="onFileChange($event)" name="fileUploaded" value="Choose a File" accept=".xlsx, .xlsm">

I found out that the onFileChange($event) won't fire since the listener I used is (change) and I'm not changing the file the I'm uploading. What can I do to sovle my problem? Thank you

EDIT: To give you context why would I want to do that, I want to upload an excel file then display its content to the page. But when I upload an excel file then edit its data inside using ms excel then save and upload it again, the new edits won't display on the page. The page still displays the old data.

Here's my code for the eventHandler:

data: AOA = [ [], [] ];
reader: FileReader = new FileReader();
onFileChange(evt: any) {
        /* wire up file reader */
        console.log("G");
        const target: DataTransfer = <DataTransfer>(evt.target);
        this.reader.onload = (e: any) => {
            /* read workbook */
            this.data = [ [], [] ];
            console.log(target.types);
            const bstr: string  = e.target.result;
            const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
            /* grab first sheet */
            const wsname: string = wb.SheetNames[0];
            const ws: XLSX.WorkSheet = wb.Sheets[wsname];
            /* save data */
            this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
        }
            this.reader.readAsBinaryString(target.files[0]);
    }

Answer 1

You can reference and then clear your input:

template

<input #myFileInput type="file"/>

script

@ViewChild('myFileInput') myFileInput;

onFileChange(event) { 
  this.myFileInput.nativeElement.value = '';
}

Answer 2

Its sort of gets cached . so just make sure u are cleaning it before uploading the file so what u can do is give the value as empty and then upload the file

<input type ="file" #fileUpload style="visibility: hidden;" (change)="uploadResume($event)"> 
<button (click)="fileUpload.value='';fileUpload.click();">Upload</button>

Answer 3

just try (onclick)="this.value = null"

in your html page add onclick method to remove previous value so user can select same file again.