Upload File as multipart/form-data from Angular with ngx-mat-file-input

If you're using <ngx-mat-file-input> with a reactive form it will give you back an object with a 'files' array. The elements of this array have the type 'File'. A File extends the Blob interface [0][1]. The Blob is what you need to send to the server.

First step: You have to wrap the result of the form inside a FormData-Object [2].

<!-- Minimal form -->
<form *ngIf="fileForm" [formGroup]="fileForm">
    <ngx-mat-file-input formControlName="file"></ngx-mat-file-input>
</form>

// the handler, e.g. if user presses "upload"-button
const file_form: FileInput = this.fileForm.get('file').value;
const file = file_form.files[0]; // in case user didn't selected multiple files

const formData = new FormData();
formData.append('file', file); // attach blob to formdata / preparing the request

Notice: You might expect that .append will return a new object like HttpHeaders#append but that is not the case here. FormData#append returns void. Therefore you can't do const formData = new FormData().append('file', file);!

Second step: Now pass the FormData-Object to HttpClient#post.

this.http.post<void>('/upload', formData).subscribe(() => {
  // worked
}, err => {
  console.error(err);
});

Notice: The server expects the file in the request parameter called 'file' because we set that name in the FormData-Object.

That's it.

A controller that accepts this file might look like shown down below(in this example: Java/Spring). Generally, it works with every controller, that accepts form multipart requests.

@PostMapping("/upload")
public void upload(@RequestParam("file") MultipartFile file) {}

[0] https://developer.mozilla.org/de/docs/Web/API/File

[1] Typescript Type Information (by your IDE)

[2] https://developer.mozilla.org/de/docs/Web/API/FormData