How to upload file in Angular2

In fact, the Http class doesn't support that at the moment.

You need to leverage the underlying XHR object to do that:

import {Injectable} from 'angular2/core';import {Observable} from 'rxjs/Rx';@Injectable()export class UploadService {  constructor () {    this.progress$ = Observable.create(observer => {      this.progressObserver = observer    }).share();  }  private makeFileRequest (url: string, params: string[], files: File[]): Observable {    return Observable.create(observer => {      let formData: FormData = new FormData(),        xhr: XMLHttpRequest = new XMLHttpRequest();      for (let i = 0; i < files.length; i++) {        formData.append("uploads[]", files[i], files[i].name);      }      xhr.onreadystatechange = () => {        if (xhr.readyState === 4) {          if (xhr.status === 200) {            observer.next(JSON.parse(xhr.response));            observer.complete();          } else {            observer.error(xhr.response);          }        }      };      xhr.upload.onprogress = (event) => {        this.progress = Math.round(event.loaded / event.total * 100);        this.progressObserver.next(this.progress);      };      xhr.open('POST', url, true);      xhr.send(formData);    });  }}

See this plunkr for more details: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info.

There is a an issue and a pending PR regarding this in the Angular repo:

• https://github.com/angular/angular/issues/10424
• https://github.com/angular/angular/pull/7310/files

your http service file:

import { Injectable } from "@angular/core";import { ActivatedRoute, Router } from '@angular/router';import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";import {Observable} from 'rxjs/Rx';import { Constants } from './constants';declare var $: any;@Injectable()export class HttpClient {  requestUrl: string;  responseData: any;  handleError: any;  constructor(private router: Router,   private http: Http,   private constants: Constants,   ) {    this.http = http;  }  postWithFile (url: string, postData: any, files: File[]) {    let headers = new Headers();    let formData:FormData = new FormData();    formData.append('files', files[0], files[0].name);    // For multiple files    // for (let i = 0; i < files.length; i++) {    //     formData.append(`files[]`, files[i], files[i].name);    // }    if(postData !=="" && postData !== undefined && postData !==null){      for (var property in postData) {          if (postData.hasOwnProperty(property)) {              formData.append(property, postData[property]);          }      }    }    var returnReponse = new Promise((resolve, reject) => {      this.http.post(this.constants.root_dir + url, formData, {        headers: headers      }).subscribe(          res => {            this.responseData = res.json();            resolve(this.responseData);          },          error => {            this.router.navigate(['/login']);            reject(error);          }      );    });    return returnReponse;  }}

call your function (Component file):

onChange(event) {    let file = event.srcElement.files;    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example.    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => {        console.log(result);    });}

your html code:

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">

Improved onChange() method :

file: File;  onChange(event: EventTarget) {        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;        let files: FileList = target.files;        this.file = files[0];        console.log(this.file);    }