File Upload Angular2 via multipart/form-data, 400 Error

Question

I need to upload a file together with some meta info via multipart/form-data like this:

Header
----boundary
Meta
----boundary
File
----boundary

For some reason I always get a 400 Error, the Backend server tells me, that the Meta-Field is missing. However, if I look into the Hex/Ascii dump with Wireshark, the field is definitely there.
The following Curl-command works perfectly fine and the file gets uploaded successfully:

curl -H "Expect:" -v -i -X POST -H "Content-Type: multipart/form-data" -H "Authorization: "token" -F "File=@/location" -F 'Meta={"access":"token"}' http://path

Therefore this doesn't seem to be a Backend failure. My Angular (4.1.3) request must be bad, but I can't figure out what's wrong with it.

Template-Code:

<input #file_input type="file" (change)="onFileInputChange($event)" multiple>

Angular2-Code:

onFileInputChange(event) {
  let fileList: FileList = event.target.files;
  for (let i = 0; i < fileList.length; i++) {
    let fp: File = fileList[i];
    let formData: FormData = new FormData();
    formData.append('File', fp, fp.name);
    const body = JSON.stringify({
       'access': "token"
    });
    this.formData.append('Meta', body);
    let RequestHeader = new Headers();
    // auto set content type
    RequestHeader.append('Content-Type', '');
    RequestHeader.append('Accept', 'application/json');
    RequestHeader.append('Authorization', "token");

    this.http.post(this.backend_url, formData, RequestHeader).map(
    res => res.json()).subscribe(
            data => console.log('success'),
            error => console.log(error))
  }
}

What am I missing here?

user6291986 · Accepted Answer · 2017-10-23 14:58:11Z

1

I finally found the solution. The Content-Type header was malformed:

Content-Type: , multipart/form-data; boundary=----WebKit12345

The content type header in the actual code was preset. By calling

headers.set('Content-Type', '');

I assumed, that the header content type was overwritten, but actually an empty string was prepended to it, so that there was a comma, which could not be parsed, of course.
I solved this by deleting the content type header completely:

headers.delete('Content-Type');

answered Oct 23, 2017 at 14:58

user6291986

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

File Upload Angular2 via multipart/form-data, 400 Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related