File upload control in Angular 2

Question

In my project, I need to develop a page where there will be 2 file upload controls and some other controls. When the user selects file it can't read the entire file at the same time (as it can be in GB), so after entering all other fields and when the user clicks final submit button then at the time it should start reading of file (in the background). We can't get the full file path of the actual file so how can I read it later. I am using angular 2 with javascript here to create the file upload control.

Answer 1

In this case you can use FileReader .

HTML:

<div>
      Select file:
      <input type="file" (change)="changeListener($event)">
    </div>

TS:

 changeListener($event) : void {
    this.readThis($event.target);
  }

  readThis(inputValue: any) : void {
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader();

    myReader.onloadend = function(e){
      // you can perform an action with readed data here
      console.log(myReader.result);
    }

    myReader.readAsText(file);
  }