How to upload file in Angular2

Question

I have to submit a form along with image. i have tried this code (with multiple ways) but did't work for me. is there anyone having working demo of file uploading using angular2 please help me out.

component.html

    <form class="form-horizontal" role="form" >          <div class="form-group">             <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label>             <div class="col-sm-7">                 <div>                     <input type="text" class="form-control" id="myname"                     [(ngModel)]="myfile.name">                                         </div>                               </div>                                        </div>                   <div class="form-group">             <label class="control-label col-sm-4" for="myimage">Image</label>             <div class="col-sm-7">                 <div>                     <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />                                          </div>                </div>         </div>           <div class="form-group">                 <div class="text-center">             <button type="button" (click)="upload()">Upload</button>                      </div>         </div>   </form> 

component.ts

     myfile={                 "name":"Mubashshir",                                "image":''      }       fileChangeEvent(fileInput: any){         this.myfile.image = fileInput.target.files;              }       upload(){           this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile)             .subscribe(                 data => {                             console.log("data submitted");                                                 },                 err => console.log(err),                 () =>{                      console.log('Authentication Complete');                                      }             );       } 

Answer 1

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

Answer 2

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">