-1

The data format that I sent from the frontend to the server is in a string format

Example:

"type": 'application/zip',
"type":"image/png"



 "{"id":"4c1vjx4k1",
      "name":"test.png",
      "type":"image/png",
      "size":151805,"metadata":{},
       "data":"iVBORw0KGgoAAAANSUhEUg }"

In the server my goal is to convert it back to a file object, because I have to use upload API to send the file object to their server (I'm using cloudinary)

It is written in this link - https://pqina.nl/filepond/docs/patterns/plugins/file-encode/

let fileAsset = Buffer.from(req.body.fileAsset, "base64");

How do I convert it back to a file object?

airsoftFreak
  • 1,450
  • 5
  • 34
  • 64
  • *in a string format* so you mean JSON? – Liam Feb 15 '21 at 08:59
  • 1
    It is json, but when it comes to the server it becomes string. I'm following the guide from this link - https://pqina.nl/filepond/docs/patterns/plugins/file-encode/ – airsoftFreak Feb 15 '21 at 09:02
  • Well that looks (looks because you haven't really given us a proper [mcve] here) like base64. So you'll want to look for how to convert base64 to file in whatever language your sever is using ([node?](https://stackoverflow.com/questions/6926016/nodejs-saving-a-base64-encoded-image-to-disk)) – Liam Feb 15 '21 at 09:19
  • Base64 seems like a really poor choice to upload files BTW. Why aren't you just using standard HTTP upload methods? They'll likely be considerably more efficient as base64 is bloaty – Liam Feb 15 '21 at 09:20

1 Answers1

0

When you get the image back as base64 string, you just need to prepend a header to the string:

    const image = "data:image/png;base64," + "iVBORw0KGgoAAAANSUhEUg";

Then it depends to you:

  • If you want to download it as a .png file. Convert it to a blob, then create a download link. Please see this article
  • If you want to show the picture in an 'img' tag, the code is: <img src={image}/>

Please refer to this page.

Saracha Tongkumpunt
  • 81
  • 1
  • 3