FormData append File does not work Angular

Question

I'm using FormData to send image to PHP API. When I use this code it does not work:

HTML Code :

<input type="file" name="file" id="file" (change)="onFileSelected($event)" />
<button pButton (click)="onUpload()" label="UPLOAD"></button>

TS Code :

onFileSelected(event) {
    this.uploadFile = event.target.files[0];
    console.log(this.uploadFile);
}

onUpload() {
    const formData = new FormData();
    formData.append('myfile', this.uploadFile, this.uploadFile.name);
    console.log(formData);
}

When console.log(this.uploadFile) i get :

and console.log(formData) i get :

Does this answer your question? [How to inspect FormData?](https://stackoverflow.com/questions/17066875/how-to-inspect-formdata) — Shoejep, Nov 10 '20 at 08:15

score 1 · Accepted Answer · answered Nov 10 '20 at 08:29

There are no issues with your code. Trying to console.log formdata will always give an empty object.

To display your filedata change your console.log to

console.log(formdata.getAll('myfile'));

The above function will return an array with your file object blob.

You can also refer to the MDN documentation for all the other formData functions

FormData append File does not work Angular

1 Answers1