title: Angular - POST uploaded file
body: <p>I'm using <a href="https://angular.io/" rel="noreferrer">Angular</a>, <a href="https://www.typescriptlang.org/" rel="noreferrer">TypeScript</a> to send a file, along with JSON Data to a server.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2';
  import {Http, Response, Headers} from 'http/http';
  
  
  @Component({ selector: 'file-upload' })
  @View({
  directives: [FORM_DIRECTIVES],
  template: `
  &lt;h3&gt;File Upload&lt;/h3&gt;
  
  &lt;div&gt;
       Select file:
      &lt;input type="file" (change)="changeListener($event)"&gt;
  &lt;/div&gt;
  
  `
  })
  export class FileUploadCmp {
  
  public file: File;
  public url: string;
  headers: Headers;
  
  
  constructor(public http: Http) {
      console.log('file upload Initialized');
      //set the header as multipart        
      this.headers = new Headers();
      this.headers.set('Content-Type', 'multipart/form-data');
      this.url = 'http://localhost:8080/test';
  }
  
  //onChange file listener
  changeListener($event): void {
      this.postFile($event.target);
  }
  
  //send post file to server 
  postFile(inputValue: any): void {
  
      var formData = new FormData();
      formData.append("name", "Name");
      formData.append("file",  inputValue.files[0]);
  
      this.http.post(this.url +,
        formData ,
          {
              headers: this.headers
  
          });
  }
  
  }
  </code></pre>
  
  <p>How can I transform the <code>formData</code> to String and send it to the server? I remember in <a href="https://angularjs.org/" rel="noreferrer">AngularJS</a> (v1) you would use <code>transformRequest</code>.</p>