Problem uploading file with FormData in Angular 6

Question

I'm trying to build a file upload system with Angular 6 for the UI and Lumen for the API. The file upload works fine when I use the API directly with Postman. But it's not working with the Angular UI. I'm using FormData to handle the uploading but the API returns a null value for the file I'm trying to upload.

HTML:

<input type="file" name="document" (change)="onFileChanged($event.target.files)">

Angular code:

public onFileChanged(files: any): void {
    var file = files[0];
    var fd = new FormData();
    fd.append('document', file);
    this.documentService
        .uploadDocument(this.id, fd)
        .subscribe(
            () => {
                console.log('success');
            },
            () => {
                console.log('failure');
            }
        );
}

Answer 1

OK I found the problem!

It was because I was using an interceptor that was adding JSON headers to every request so it was converting everything to JSON which obviously wouldn't work. So I just removed that header and it worked.