title: Angular 2 read input file
body: <p>I am trying to understand how to use input file with Angular 2. In my example below, I would like my console to log the name of the file I have uploaded. Unfortunately, this code sends an error <code>Cannot read property 'target' of undefined</code>. </p>
  
  <p>My <strong>component.html</strong></p>
  
  <pre><code>&lt;input 
     id="imageUpload" 
     type="file" 
     (change)="imageRun(input)"/&gt;
  </code></pre>
  
  <p>My <strong>component.ts</strong></p>
  
  <pre><code>imageRun(input){
      var files = input.target.files[0];
      console.log(files.name);
  }
  </code></pre>
  
  <p>I am unsure if there is an Angular specific solution to this issue, as I have run into the same issue when doing this in plain javascript. I have looked over a few plain JS tutorials that all have me using the <code>addEventListener</code> method in JS, instead of assigning these triggers in HTML. But these methods, as far as I understand, do not really apply to an Angular 2 project. </p>
  
  <p>For reference, here is <a href="https://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow">an example</a> of doing pretty much the same thing in plain JavaScript, and using addEventListener inside the src script. </p>