How do you POST a FormData object in Angular 2?

Question

I need to upload a file and send some json along with it, I have this function:

POST_formData(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');

        if (authtoken) {
            headers.append("Authorization", 'Token ' + authtoken)
        }

        headers.append("Accept", 'application/json');
        headers.delete("Content-Type");

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))

        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        })
    }

My issue is, if I set the content-type to "multipart/form-data" my server complains about the boundaries, if I remove the content-type header completely, my server complains that it "text/plain" a supported media type.

So, how do you send FormData with angular2?

the FormData is not supported now. I can see a todo comment `// TODO: support URLSearchParams | FormData | Blob | ArrayBuffer` in `Request` class — Jiang YD, May 12 '16 at 01:56
just to note, headers.delete("Content-Type") is very important for file upload. i was doing this: headers.set("Content-Type", "") , but that will cause angular to append the multipart/form-data string with a comma(which will make it malformed. I've spent all day looking for this solution. thanks! — Darin Cardin, Mar 31 '17 at 15:25

Dhruvan Ganesh · Answer 1 · 2017-11-30T12:19:02.157

Template:

<label class="btn btn-primary">
  <input type="file" style="display: none;" multiple="true" (change)="fileChange($event)" accept=".xml">
  <span>Click Me!</span>
</label>

UPD: Angular 5 - HttpClient + Typescript

onFileUpload(event: EventTarget) {

  const eventObj: MSInputMethodContext = <MSInputMethodContext>event;
  const target: HTMLInputElement = <HTMLInputElement>eventObj.target;
  const files: FileList = target.files;

  const formData: FormData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }

  // POST
  this.httpClient.post<AnalyzedData>(uploadUrl, formData).subscribe(...);
}

old Http lib - before Angular 4.3:

fileChange(event) {
    let files = event.target.files;
        if (files.length > 0) {
        let formData: FormData = new FormData();
        for (let file of files) {
             formData.append('files', file, file.name);
        }
        let headers = new Headers();
        headers.set('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(uploadURL, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
            data => {
                // Consume Files
                // ..
                console.log('uploaded and processed files');
            },
            error => console.log(error),
            () => {
                this.sleep(1000).then(() =>
                    // .. Post Upload Delayed Action
                )
            });
    }
}

For me, the important line missing was: headers.set('Accept', 'application/json'); — James Lawruk, Nov 06 '17 at 18:45
Note that this is for and old version of Http which is now (5.x) deprecated. You should use `HttpClient` from `@angular/common/http`. — Lazar Ljubenović, Nov 30 '17 at 10:36
Using angular 5.2.3 and "UPD: Angular 5 - HttpClient + Typescript" solution worked for me for upload *.mp3 files. On the backend, I used Multer on NodeJS — Renato Francia, Feb 23 '18 at 17:00

score 12 · Accepted Answer · edited May 23 '17 at 11:54

12

It's an Open Isuue on Angular2 Git Repository, and there is also a Pull Request waiting to be merged, hope that it will be merged soon.

Alternatively,

You can use XMLHttpRequest Object directly, for that.

And don't forget to set the header

xhr.setRequestHeader("enctype", "multipart/form-data");

// IE workaround for Cache issues
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Cache-Control", "no-store");
xhr.setRequestHeader("Pragma", "no-cache");

on the XMLHttpRequest that you make.

Similar Questions:

How to upload file in Angular2

Angular 2 File upload from input type=file

Angular2 post uploaded file

edited May 23 '17 at 11:54

Community

1
1

answered May 12 '16 at 04:53

Ankit Singh

24,525
11
66
89

2

No longer needed to use XMLHttpRequest. It works with http – acastano Oct 11 '16 at 19:36
9

gist with example https://gist.github.com/Toxicable/1c736ed16c95bcdc7612e2c406b5ce0f – surya Oct 25 '16 at 16:04
Many thanks for the link @surya, it worked like a charm! – fxlemire Dec 14 '16 at 16:47
you also might wanna check this answer: http://stackoverflow.com/questions/36352405/file-upload-with-angular2-to-rest-api/39862337#39862337 – Motassem Kassab Dec 29 '16 at 09:41
its not an open issue now, available in latest angular – Sreekumar P Aug 01 '17 at 07:24

score 5 · Answer 3 · answered Jan 18 '17 at 17:20

I know this has been marked answered and is pretty old, however I had an issue posting the FormData object to an OpenIdConnect AuthServer, and the file upload examples above weren't what I was looking for.

Here is my service that gets an OpenIdAuthToken:

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers, URLSearchParams} from '@angular/http'
import { OpenIdTokenRequest, SmartData } from '../model/openid-token-request';
import { OpenIdToken } from '../model/openid-token';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from 'rxjs';

@Injectable()

export class TokenService {

    constructor(private _http: Http) { }

    getToken(requestData: OpenIdTokenRequest, smartData: SmartData) {
        let _urlParams = new URLSearchParams();
        _urlParams.append('code', requestData.code);
        _urlParams.append('grant_type', requestData.grantType);
        _urlParams.append('redirect_uri', requestData.redirectUri);
        _urlParams.append('client_id', requestData.clientId);

        let _url = smartData.tokenUri;
        let _options = this.getTokenPostOptions();

        return this._http.post(_url, _urlParams, _options)
            .map(response => <OpenIdToken>response.json())
    }

    private getTokenPostOptions(): RequestOptions {

        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
        let options = new RequestOptions({ headers: headers });

        return options;
    }

}

score 1 · Answer 4 · answered Aug 25 '17 at 10:35

1

I solved this problem, don't need content-type at all.

See here, https://stackoverflow.com/a/45879409/2803344

Also see here to check how to set headers, Angular2 - set headers for every request

2017.8.25

answered Aug 25 '17 at 10:35

Belter

3,573
5
42
58

How do you POST a FormData object in Angular 2?

4 Answers4

Linked

Related