title: Angular 2 - upload of file
body: <p>I need to create upload of images to my webserver in my Angular 2 app. Can anybody provide me some guidance how to achive this?</p>
  
  <p><strong>These are the prerequisities:</strong> </p>
  
  <ul>
  <li>ASMX web service communicating in JSON.</li>
  <li>post method used for communication.</li>
  <li>JPEG / PNG up to 1MB of size.</li>
  </ul>
  
  <p><strong>Concept I wanted to follow (but failed)</strong></p>
  
  <p>Load the content of JPEG to variable, encode it using the Base64 coding and post it to ASMX service that will accept two parameters (token for authentication and encoded data. </p>
  
  <p><strong>What exactly is my problem</strong></p>
  
  <p>Web service was the easy part, it is done and working, but I can't manage to get the file content for enconding. I used this:</p>
  
  <p>component.html</p>
  
  <pre><code>...
  &lt;input type="file" (change)="fileChangeEvent($event)" /&gt;
  ...
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>private fileChangeEvent(fileInput: any) {
      let image = fileInput.target.files[0] as File;
      ...
  }
  </code></pre>
  
  <p>As you have probably guessed, the problem is in the File class, because it provides me only basic info about the file (name, size, last modif, ...) but I can't get the content of the file. Or at least I don't know how to get it. I also checked other questions here on SO, but all of the answers had something special that did not met my requirements. And maybe I'm just blind, but I can't see where the content is get. </p>
  
  <p>So, is there anybody, who is able to provide me some guidelines to follow?</p>
  
  <p>Thank you very much in advance.</p>