Angular 2 - Post File to Web API

Question

I am attempting to pass a file to Web API from an Angular 2 app, and the actual file data does not get sent.

Here is my angular 2 service code:

        var headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');

        var formData = new FormData();
        formData.append("file", file);

        return this.http.post('http://myapiurl.com/files/upload', formData, { headers: headers }).map(res => res.json());

In the angular 2 docs, the POST method signature is as follows:

post(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response>

There is no option to pass Form Data, or other object. Just a string in the bodys request. The current work around is to use javascript and regular xhr requests. There are obvious downsides to this like not being able to use observables, etc.

Any help on this would be greatly appreciated.

you mean that you have to send some data/Objects via API request call ? — Pardeep Jain, Feb 02 '16 at 04:51

score 3 · Accepted Answer · answered Feb 02 '16 at 08:23

3

In fact, this isn't supported yet. See this in-progress issue: https://github.com/angular/angular/issues/5517.

The current implementation of the HTTP support only supports text contents for request payload. See these two files

Hope it helps you, Thierry

answered Feb 02 '16 at 08:23

Thierry Templier

198,364
44
396
360

That is unfortunate. It seems like this is a critical feature that should have been put into beta. Thanks for the links, and now I have the ability to track it. – aoakeson Feb 02 '16 at 16:54
Yes, agreed with you! – Thierry Templier Feb 02 '16 at 17:00

score 1 · Answer 2 · answered Nov 16 '16 at 09:15

1

In the final version of angular 2, http.post(...) has the body parameter as any rather than string, doc here. So what you can do is simply pass the formData object, the way you were doing in the question.

answered Nov 16 '16 at 09:15

irtaza

721
1
6
13

Zilong Wang · Answer 3 · 2016-02-04T15:14:27.000

In my project , I use the XMLHttpRequest to send multipart/form-data. I think it will fit you to.

and the uploader code

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/rest/api', true);
xhr.withCredentials = true;
xhr.send(formData);

html code

<input type="file" (change)="selectFile($event)">

ts code

selectFile($event): void {
  var inputValue = $event.target;
  this.file = inputValue.files[0];
  console.debug("Input File name: " + this.file.name + " type:" + this.file.size + " size:" + this.file.size);
}

upload code:

const URL = 'http://www.example.com/rest/upload/avatar'; 

uploader:MultipartUploader = new MultipartUploader({url: URL});

item:MultipartItem = new MultipartItem(this.uploader);

if (this.item == null){
   this.item = new MultipartItem(this.uploader);
}
if (this.item.formData == null)
  this.item.formData = new FormData();

this.item.formData.append("email",  this.email);
this.item.formData.append("password",  this.password);
this.item.formData.append("file",  this.file);

this.item.callback = this.uploadCallback;
this.item.upload();

Here is example : https://github.com/wangzilong/angular2-multipartForm

Angular 2 - Post File to Web API

3 Answers3

Linked