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?

Shoejep
– Shoejep

2020-11-10 08:15:35 +00:00
Commented Nov 10, 2020 at 8:15 — Shoejep
– Shoejep, Commented Nov 10, 2020 at 8:15

Vedant Shetty · Accepted Answer · 2020-11-10 08:29:13Z

1

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

answered Nov 10, 2020 at 8:29

Vedant Shetty

1,71714 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

FormData append File does not work Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related