2 votes

convert base64 image to file in angular 9

I am using https://www.npmjs.com/package/ngx-image-cropper to crop images uploaded from angular to my node api, the problem is that it transforms them to base64 and although everything is fine, I can't upload them to the server so I'm trying to convert them to file type.

let nuevo = new FormData();

let split = this.croppedImage.split(",")[1];
let blob = new Blob([atob(split)], { type: "image/png" });
let file = new File([blob], "imageFileName.png");

nuevo.append("tipo", "perfil");
nuevo.append("user", this.id.toString());
nuevo.append("image", file);

this.dataService.nuevaImage(nuevo).subscribe(
  res => console.log(res),
  err => console.log(err)
)

Until the moment of using the split everything is ok, but when transforming it to File and sending it to the api it looks black and in local it says that the format is not compatible. PS: The api does not throw error

1voto

Mario Points 39

I was able to solve it with https://stackblitz.com/edit/ngx-image-croppe-anartz?fbclid=IwAR2caX0Kd1IkZ9e_2vBlUm9hTXCUCb5BZtlezwAtwEMl_YcKaaFj472bVGE

it's a bit cumbersome the decoding issue but this helped me

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X