Angular 6 post-request with a multipart form doesn't include the attached file of the object posted

Question

I'm trying to send a form along with a file to my API through Angular 6, but the post doesn't include the file, even though the object that's supposed to be sent does.

When I'm looking at the console logs I see what is expected, amount:"amount", invoicefile: File.... But In the outgoing request the field shows invoicefile:{}, and now file is received on the other side. Some pictures are included at the end.

Lastly my API is telling my all fields are missing, but I think that another problem.

The component looks like this:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { FormGroup, FormBuilder, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

import { AlertService } from '../_services';
import { InvoiceService } from '../_services';
import { Invoice } from '../_models';

@Component({
  selector: 'app-registerinvoice',
  templateUrl: './registerinvoice.component.html',
  styleUrls: ['./registerinvoice.component.css']
})
export class RegisterinvoiceComponent implements OnInit {
  public registerForm: FormGroup;
  public submitted: boolean;

  constructor(
    private router: Router,
    private invoiceService: InvoiceService,
    private alertService: AlertService,
    private http: HttpClient,

  ) { }
  fileToUpload: File = null;

  ngOnInit() {
    this.registerForm = new FormGroup({
      serial: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
      amount: new FormControl('', [<any>Validators.required, <any>Validators.minLength(4)]),
      debtor: new FormControl('', [<any>Validators.required, <any>Validators.minLength(10)]),
      dateout: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)]),
      expiration: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)]),
    });
  }
  handleFileInput(files: FileList){
    this.fileToUpload=files.item(0);
  }

  deliverForm(invoice: Invoice, isValid) {
    this.submitted=true;
    if (!isValid){
      return;
    }
    invoice.invoicefile=this.fileToUpload;
    console.log(invoice);
    console.log(typeof(invoice.invoicefile));
    this.invoiceService.create(invoice)
      .pipe(first())
      .subscribe(
        data => {
          this.alertService.success('Invoice successfully uploaded', true);
          this.router.navigate(['/profile']);
        },
        error => {
          this.alertService.error(error);
        });
  }

}

Followed by the service that provides the post:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http } from '@angular/http';
import { Invoice } from '../_models';
import { FormGroup } from '@angular/forms';

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}
@Injectable({
  providedIn: 'root'
})
export class InvoiceService {

  constructor(
    private http: HttpClient
  ) { }
  create(invoice: Invoice){
    return this.http.post('/api/v1/invoices/', invoice, HttpUploadOptions)
  }
}

And lastly the class:

export class Invoice {
    id: any;
    serial: any;
    amount: any;
    debtor: any;
    dateout: any;
    expiration: any;
    fid: any;
    invoicefile: File;
}

The console log that looks correct:

And the outgoing request where the file is missing:

EDIT:

Now the service code for create looks like this:

create(invoice: Invoice){
    let payload=new FormData();
    payload.append('amount', invoice.amount);
    payload.append('debtor', invoice.debtor);
    payload.append('serial', invoice.serial);
    payload.append('dateout', invoice.dateout);
    payload.append('expiration', invoice.expiration);
    payload.append('invoicefile', invoice.invoicefile);
    return this.http.post('/api/v1/invoices/', payload, HttpUploadOptions)
  }

And the response looks like this. Looks weird to me, and I'm still getting some errors from my back-end, but that's another question.

@OPV The problem is, if you look at the image above, it is actually sending JSON and not a multipart encoded body. This is because, despite setting the header, Angular assumes that the body should be JSON, unless the body is of type FormData — user184994, May 28 '18 at 19:59
Fixed my issue: in interceptor i had given condition to accept only 'application/json', after removing that condition it started working. — Charitha Goonewardena, Sep 01 '21 at 09:53

score 36 · Accepted Answer · answered May 28 '18 at 19:37

36

Your POST request body is actually JSON, not Multipart as you would hope (despite what the Content-Type header says).

In order to remedy that, you need to build a FormData object, and use that in your request instead:

let input = new FormData();
// Add your values in here
input.append('id', invoice.id);
input.append('invoiceFile', invoice.invoiceFile);
// etc, etc

this.http.post('/api/v1/invoices/', input, HttpUploadOptions)

answered May 28 '18 at 19:37

user184994

17,791
1
46
52

I edited my code as you described, is a multipart response supposed to look like that? I'm trying to figure out if the problem is definitely with my back-end now. Since it's saying that all fields are missing, though, if that response is correct, that is another question for later. – Marcus Grass May 28 '18 at 20:09
Yes, that's better, that's the correct format now. Just make sure that your backend is set up to expect multipart as well – user184994 May 28 '18 at 20:11
For brevity I'll include that for this to work HttpUploadOptions need to be removed completely. If it is forced to be multipart/form-data the vitaly important WebKitFormBoundary isn't included, and it NEEDS to be included in the header, otherwise the back-end doesn't know where to cut the different form inputs, and will throw an error. – Marcus Grass May 29 '18 at 21:04
Thanks buddy it helps me lot. – Gurpreet Singh Jun 04 '19 at 19:08

score 31 · Answer 2 · answered Dec 06 '18 at 06:36

31

Remove the multipart/form-data from the headers to fix this issue

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}

Solution

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Accept": "application/json" })
}

answered Dec 06 '18 at 06:36

user2617449

348
3
9

2

This one worked for me. Angular 6 was submitting file as binary instead of form data. – faizan.sh Mar 14 '19 at 21:01
Thanks buddy it helps me lot. – Gurpreet Singh Jun 04 '19 at 19:07
You made my day..Thanks – Vibhu kumar Sep 17 '19 at 08:43
This is working for me on Angular 12 and sent an email with a Contact Form 7 API REST in WordPress – juanitourquiza Oct 07 '21 at 02:57
this doesnot works for me. – Amit Jun 18 '22 at 14:13

score 3 · Answer 3 · edited Apr 18 '19 at 12:58

3

I had previously this one which was giving error

const formData = new FormData();
formData.append(...);
this.http.post(apiUrl, {formData});

I just removed the object from braces and it worked

this.http.post(apiUrl, formData);

edited Apr 18 '19 at 12:58

mbojko

13,503
1
16
26

answered Feb 03 '19 at 20:59

AbdulRehman

946
9
16

Also noted that, I have single input element in template, even no form tag, and works like charm – AbdulRehman Feb 03 '19 at 21:00

score 0 · Answer 4 · answered Jan 10 '20 at 15:02

0

Folks,

if you are running out of options. you can also try to pass the content type as empty string as below:

const HttpUploadOptions = {
  headers: new HttpHeaders({ 'Content-Type':'' })
}

or

const HttpUploadOptions = {
  headers: new HttpHeaders().append({ 'Content-Type':'' });
}

answered Jan 10 '20 at 15:02

riser52

1

Didnt work for me. Removing content-type gives unsupported media type error – Amit Jun 18 '22 at 14:14

ktretyak · Answer 5 · 2020-05-24T10:44:57.193

0

For Angular v8+, you can try @ng-stack/forms, it have "file" support with validation feature.

You don't even need to add headers, just pass form value:

// Value of formControl here is instance of FormData
// and it's OK to directly upload this value.
const formData = this.formControl.value;

this.httpClient.post('api/path', formData).subscribe(() => {
  // Do something
});

edited May 24 '20 at 10:44

answered May 24 '20 at 10:36

ktretyak

27,251
11
40
63

Angular 6 post-request with a multipart form doesn't include the attached file of the object posted

5 Answers5

Linked