title: Reading a local file with typescript, and the 'this' object
body: <p>I am writing a TypeScript browser application. I need to read the contents of an XML file, and store it in a class.  I am having issues with the 'this' object. Here is what I have so far:</p>
  
  <pre><code>class FileTools {
    text: string;
  
    readSingleFile(e) {
      var fileName = e.target.files[0];
      if (!fileName) {
          return;
      }
      var reader = new FileReader();
      reader.onload = file =&gt; {
          var contents: any = file.target;
          this.text = contents.result; &lt;== Issue here. 'this' is the filereader
      };
      reader.readAsText(fileName);
  }
  
    start() {
      document.getElementById("file-input").addEventListener("change", this.readSingleFile, false);
    }
  }
  
  window.onload = () =&gt; {
    var tcx = new FileTools();
    tcx.start();
  };
  </code></pre>
  
  <p>The HTML has a file selection box
      input type="file" id="file-input"</p>
  
  <p>The issue is that when the file is loaded, using the 'this' points to the file reader, not to my class. If I add a 'self' variable first like this:</p>
  
  <pre><code>  readSingleFile(e) {
      var fileName = e.target.files[0];
      if (!fileName) {
          return;
      }
      var reader = new FileReader();
      var self = this;
      reader.onload = file =&gt; {
          var contents: any = file.target;
          self.text = contents.result; &lt;== Issue here. 'this' is the filereader
      };
      reader.readAsText(fileName);
  }
  </code></pre>
  
  <p>then self points to the input box (as that is the context of the outer method).</p>
  
  <p>So the question is, how do I get the real 'this' object for the FileTools reference.</p>
  
  <p>Thanks.</p>