Fairly new to angular and spring boot. I am trying to develop an importing function and have developed a text file parser. I have three buttons: Import, Upload and Back button.

When clicking the Import button, it will import the text file from local. It will go to the importFileChecker() to check if it's a valid txt file then proceed to the text file parser function (which I have named openFile()). When clicking Upload, its endpoint will save the text file contents to the database. Then when clicking Back, it will just go back to the main page and lets you upload again.

My upload and import is working fine. However, my problem is that whenever I click back, it doesn't proceed to my importFileChecker() and is just like in a continuous loop in files like core.js and such when I breakpoint thru browser.

I have added console logs to monitor the flow. Any help would be appreciated on what my error would be.

Scenario: Clicked Import then chose a file (normal and correct flow, after this is the upload)

onBtnImportClick starting                 (line 181)

reached end of line onBtnImportClick      (line 195)

importFileChecker is starting             (line 202)

process for txt file starting.            (line 720)

Scenario: Clicked Import -> chose a file -> Clicked Back -> Clicked Import again -> chose a file again

onBtnImportClick starting                 (line 181)

reached end of line onBtnImportClick      (line 195)

Nothing follows. Putting breakpoints and pausing, it stops at core.js and such

These are my html and .ts:

upload-file-test.html:

1. My import button html:

<div >
    <input  type="button" value="{{ 'Import' }}"
       (click)="onBtnImportClick($event)">
    <input  id="importData" type="file" (change)="importFileChecker($event)" />
</div>

upload-file-test.component.ts:

1. onBtnImportClick

public onBtnImportClick(event: any) {
    console.log('onBtnImportClick starting');
    event.preventDefault();
    event.stopPropagation();
    //some additional code for getting data
    document.getElementById("importData").click();
    
    console.log('reached end of line onBtnImportClick');
  }

2. importFileChecker

public importFileChecker(event: any){
    event.preventDefault();
    event.stopPropagation();
    console.log('importFileChecker is starting')
    this.testFileName = event.target.files[0].name;
    var fileName = event.target.files[0].name;
      if(fileName.includes('.txt')){
         this.openFile(event);
         this.enableUploadButton = true;
    } else {
      //some error popup here
    }
    this.blocked=false;
  }

3. back

back(){
    this.goToUploadPage = false;
    this.testFileName = '';
    
  }

CodePudding user response：

importFileChecker() method is triggered by a change event and it won't be called if you select the same file multiple times. This file is stored in the input element. You have to clear the input element in back() method. One possible way is to use a template reference variable.

Html:

...
<input #inputRef  id="importData" type="file" (change)="importFileChecker($event)" />
...

Component:

...
@ViewChild("inputRef") inputRef: ElementRef;
...
back() {
    this.goToUploadPage = false;
    this.testFileName = "";
    this.inputRef.nativeElement.value = "";
}