title: Angular 6 post-request with a multipart form doesn't include the attached file of the object posted
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Lastly my API is telling my all fields are missing, but I think that another problem.</p>
  
  <p>The component looks like this:</p>
  
  <pre><code>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('', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(5)]),
        amount: new FormControl('', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(4)]),
        debtor: new FormControl('', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(10)]),
        dateout: new FormControl('', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(8)]),
        expiration: new FormControl('', [&lt;any&gt;Validators.required, &lt;any&gt;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 =&gt; {
            this.alertService.success('Invoice successfully uploaded', true);
            this.router.navigate(['/profile']);
          },
          error =&gt; {
            this.alertService.error(error);
          });
    }
  
  }
  </code></pre>
  
  <p>Followed by the service that provides the post:</p>
  
  <pre><code>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)
    }
  }
  </code></pre>
  
  <p>And lastly the class:</p>
  
  <pre><code>export class Invoice {
      id: any;
      serial: any;
      amount: any;
      debtor: any;
      dateout: any;
      expiration: any;
      fid: any;
      invoicefile: File;
  }
  </code></pre>
  
  <p>The console log that looks correct:<a href="https://i.stack.imgur.com/TJwdu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TJwdu.png" alt="enter image description here"></a></p>
  
  <p>And the outgoing request where the file is missing:
  <a href="https://i.stack.imgur.com/7wTwH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7wTwH.png" alt="enter image description here"></a></p>
  
  <p>EDIT: </p>
  
  <p>Now the service code for create looks like this:</p>
  
  <pre><code>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)
    }
  </code></pre>
  
  <p>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.
  <a href="https://i.stack.imgur.com/s4exF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/s4exF.png" alt="enter image description here"></a></p>