File Upload In Angular?

Angular 2 provides good support for uploading files. No third party library is required.

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(event) {    let fileList: FileList = event.target.files;    if(fileList.length > 0) {        let file: File = fileList[0];        let formData:FormData = new FormData();        formData.append('uploadFile', file, file.name);        let headers = new Headers();        /** In Angular 5, including the header Content-Type can invalidate your request */        headers.append('Content-Type', 'multipart/form-data');        headers.append('Accept', 'application/json');        let options = new RequestOptions({ headers: headers });        this.http.post(`${this.apiEndPoint}`, formData, options)            .map(res => res.json())            .catch(error => Observable.throw(error))            .subscribe(                data => console.log('success'),                error => console.log(error)            )    }}

using @angular/core": "~2.0.0" and @angular/http: "~2.0.0"

From the answers above I build this with Angular 5.x

Just call uploadFile(url, file).subscribe() to trigger an upload

import { Injectable } from '@angular/core';import {HttpClient, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';import {Observable} from "rxjs";@Injectable()export class UploadService {  constructor(private http: HttpClient) { }  // file from event.target.files[0]  uploadFile(url: string, file: File): Observable<HttpEvent<any>> {    let formData = new FormData();    formData.append('upload', file);    let params = new HttpParams();    const options = {      params: params,      reportProgress: true,    };    const req = new HttpRequest('POST', url, formData, options);    return this.http.request(req);  }}

Use it like this in your component

  // At the drag drop area  // (drop)="onDropFile($event)"  onDropFile(event: DragEvent) {    event.preventDefault();    this.uploadFile(event.dataTransfer.files);  }  // At the drag drop area  // (dragover)="onDragOverFile($event)"  onDragOverFile(event) {    event.stopPropagation();    event.preventDefault();  }  // At the file input element  // (change)="selectFile($event)"  selectFile(event) {    this.uploadFile(event.target.files);  }  uploadFile(files: FileList) {    if (files.length == 0) {      console.log("No file selected!");      return    }    let file: File = files[0];    this.upload.uploadFile(this.appCfg.baseUrl + "/api/flash/upload", file)      .subscribe(        event => {          if (event.type == HttpEventType.UploadProgress) {            const percentDone = Math.round(100 * event.loaded / event.total);            console.log(`File is ${percentDone}% loaded.`);          } else if (event instanceof HttpResponse) {            console.log('File is completely loaded!');          }        },        (err) => {          console.log("Upload Error:", err);        }, () => {          console.log("Upload done");        }      )  }

Thanks to @Eswar. This code worked perfectly for me. I want to add certain things to the solution :

I was getting error : java.io.IOException: RESTEASY007550: Unable to get boundary for multipart

In order to solve this error, you should remove the "Content-Type" "multipart/form-data". It solved my problem.