After successfully uploading a file, I encountered an issue where the system does not allow me to upload the same file twice. Here is the code snippet related to the problem:
<input type="file" (change)="onFileChange($event)" name="fileUploaded" value="Choose a File" accept=".xlsx, .xlsm">
The problem lies in the fact that the onFileChange($event) function is not triggered because the event listener used is (change), and I am not technically "changing" the file being uploaded. What steps can I take to resolve this issue? Thank you for your help.
EDIT: To provide some context as to why I require this functionality, I need to upload an Excel file and display its contents on the page. However, if I upload an Excel file, make edits using Microsoft Excel, save those edits, and then attempt to upload the revised file again, the updated data does not reflect on the webpage - it still displays the old data.
Below is the code snippet 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]);
}