How to upload files(multipart) using angularjs2

Question

Do angular2 supports multipart form submit, any example available?

Any link to docs specific to this is much appreciated

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

**** Updated later with Working Demo using XMLHttpRequest ****

Any example showcasing sending FormData as part of http,

Below is a draft code which works fine for me but like to know if same supported 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 make below code work?

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

Answer 1

Sample snippet to pass formData which contains 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 multipart upload. AngularJs also have ng-file-upload in case you want to have a look at directive.