FormData Append method doesn't work in Angular

Question

I have an Angular app where I want to implement upload of images to the server. I'm stuck on the moment where I must append chosen file to the newly created FormData. Here is my TypeScript component relevant part:

imageData: File = null;
avatar = null;

fileProgress(fileInput: any) {
  this.imageData = <File>fileInput.target.files[0];
  this.avatar = new FormData();
  this.avatar.append('avatar', this.imageData);
  console.log(this.avatar, this.imageData)
}

This is what appears in console - FormData {} File {name: "background.jpg", lastModified: 1579183010623, lastModifiedDate: Thu Jan 16 2020 15:56:50 GMT+0200, webkitRelativePath: "", size: 8272, …}

So basically I don't understand why I can't append already existing this.imageData with value to this.avatar, when I try to append it, it's value doesn't change and i still have empty array = FormData {}. Any help would be appreciated.

And it's not an Angular problem. Try doing this in your browser's dev tools. You will see similar behaviour — Kurt Hamilton
– Kurt Hamilton, Commented Feb 27, 2020 at 13:26
It logs File {name: "c6a60a43d7.png", lastModified: 1578421705098, lastModifiedDate: Tue Jan 07 2020 20:28:25 GMT+0200 (Восточная Европа, стандартное время), webkitRelativePath: "", size: 257877, …} for this.avatar.get('avatar') — Антон Портнянко
– Антон Портнянко, Commented Feb 27, 2020 at 13:40

Wassim Katbey · Accepted Answer · 2020-02-27 14:17:06Z

1

Appending a value to 'avatar' in FormData, adds a value to the 'avatar' key. If you'd like to retrieve the values in a given key, you'd execute this.avatar.get('avatar')

It seems as though the file is retrieved and stored successfully in your example, is there anything that isn't working in particular?

edited Feb 27, 2020 at 14:17

answered Feb 27, 2020 at 13:54

Wassim Katbey

3374 silver badges9 bronze badges

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

Comments

Alpay GÜNEŞ · Accepted Answer · 2020-02-27 13:29:46Z

0

maybe you should investigate.

fileReader = new FileReader ();

fileReader.onload = function(evt) {

 ....

})

answered Feb 27, 2020 at 13:29

Alpay GÜNEŞ

291 silver badge3 bronze badges

1 Comment

Антон Портнянко Over a year ago

What exactly should I investigate?

Collectives™ on Stack Overflow

FormData Append method doesn't work in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related