How to upload files (multipart) using angularjs2

Question

Do angular2 support submitting a multi-page form, is any example available?

Any reference to documents specific to this is greatly appreciated.

See a post from angular github https://github.com/angular/angular/issues/6030

**** Updated later with a working demo using XMLHttpRequest ****

Any example demonstrating FormData as part of http ,

Below is the project code, which is great for me, but would like to know if it supports in http

HTML

  <input id="single_f_fileup" [(ngModel)]="model.image" type="file" (change)="selectFile($event)" name="single_fileup" /> 

ANGULAR2

 selectFile($event): void { var files = $event.target.files || $event.srcElement.files; var file = files[0]; let formData = new FormData(); formData.append("single_fileup", file); formData.append('key1', 'value1'); formData.append('key2', 'value2'); var req = new XMLHttpRequest(); req.open("POST", "/api/fileupload"); req.send(formData); } 

NODEJS 6.2

 var multer = require('multer'); var storage = multer.memoryStorage(); var upload = multer({ storage: storage }); router.post('/api/fileupload', upload.single('single_fileup'), function(req, res, next){ console.log(req.body,req.file); }); 

How to do the work below code?

  this.http.post('/api/fileupload', formData) .map(this.extractData) .catch(this.handleError); 

Answer 1

An example snippet for passing formData that contains an image

https://gist.github.com/arciisine/ee57727e56cbc5e83739b2c24fd69658

https://github.com/angular/angular/issues/6030

 import { Component, Input, AfterViewInit } from '@angular/core'; import { NgModel, DefaultValueAccessor, NgControl } from '@angular/forms'; import { Http, Headers, RequestOptions } from '@angular/http'; @Component({ selector: 'app-file-uploader', template: '<input type="file" (change)="updated($event);">', providers: [NgModel, DefaultValueAccessor] }) export class FileUploaderComponent implements AfterViewInit { static ROOT = '/rest/asset'; @Input() private companyId: string = ''; private value: string; private changeListener: Function; constructor(private http: Http, private input: NgControl) { this.input.valueAccessor = this; } ngAfterViewInit() { } writeValue(obj: any): void { this.value = obj; } registerOnChange(fn: any): void { this.changeListener = fn; } registerOnTouched(fn: any): void { } updated($event) { const files = $event.target.files || $event.srcElement.files; const file = files[0]; const formData = new FormData(); formData.append('file', file); const headers = new Headers({}); let options = new RequestOptions({ headers }); let url = FileUploaderComponent.ROOT + (this.companyId ? '/' + this.companyId : ''); this.http.post(url, formData, options).subscribe(res => { let body = res.json(); this.value = body.filename; if (this.changeListener) { this.changeListener(this.value); } }); } } 

Answer 2

ng2-file-upload will be your guide for multi-page downloads. AngularJs also has ng-file-upload if you want to see the directive.