angulartypescriptfile-upload

How to upload the SAME file in angular4


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]);
    }

Solution

  • You can reference and then clear your input:

    template

    <input #myFileInput type="file"/>
    

    script

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