title: Upload a File and Read Data with FileReader in Angular 2
body: <p>I am trying to create an upload form in Angular 2 ts (2.2.1), that allows the upload of e.g. a CSV file, but instead of the file being sent straight to a http service I want the file first to be validated in the browser.</p>
  
  <p>So far I can already upload a file and print it in the console with this code:</p>
  
  <ol>
  <li><p>Html input for file upload</p>
  
  <pre><code>&lt;input type="file" (change)="changeListener($event)" #input /&gt;
  </code></pre></li>
  <li><p>In my angular component I have set up the eventListner and the File reader. </p>
  
  <pre><code>export class UploadComponent {
  
      public fileString;
  
      constructor() {
          this.fileString;
      }
  
      changeListener($event): void {
              this.readThis($event.target);
          }
  
      readThis(inputValue: any): void {
          var file: File = inputValue.files[0];
          var myReader: FileReader = new FileReader();
          var fileType = inputValue.parentElement.id;
          myReader.onloadend = function (e) {
              //myReader.result is a String of the uploaded file
              console.log(myReader.result);
  
              //fileString = myReader.result would not work, 
              //because it is not in the scope of the callback
          }
  
          myReader.readAsText(file);
      }
  }
  </code></pre></li>
  </ol>
  
  <p>This code works perfectly fine so far.</p>
  
  <p>However I have not found a way to store the data from the reader in a way that allows me to access it with my angular component.</p>
  
  <p>The <code>myReader.onloadend()</code> callback function does not have access to the component's variables. Is there some way to inject those variables?</p>
  
  <p>How can I get the read data into the <code>fileString</code> variable in my component?</p>