How to upload base64 data and save it as a PNG/JPEG?

Help Coding
1

Hey,

I’ve tried searching here, stack exchange, everywhere else I can think of…and I just can’t find a solution to my specific issue.

I want to push base64 image data up to IPFS and store it as a PNG.

I’m running pure react so I can’t save the file to the server first. I was hoping I could write the data and tell IPFS that the data needs to be stored under a specific filename? Any experts that can give me some advice?

Thanks in advance

2

Define “up to IPFS”. Are you using js-ipfs? A local IPFS daemon? Infura?

3

Oh sorry, that could have used more clarity …
Yeah the js-ipfs library, I get it to push the data up but when I view the IPFS data I only get the raw base64 image data.

I’m planning to pull images from a DB and then merge them in React with merge-images library, which outputs base64 and as I’m running pure React I dont have anywhere to write the png/jpeg to before I add it to IPFS

  import IPFS from 'ipfs'

  const node = await IPFS.create()
  const results = await node.add(data)
4

You need to decode the base64 data into a buffer, then add that.

1 Like
5

Awesome, thanks for your help, got it working.

Still not sure how to specify a filename? But at least now I have the base64 data displaying as an image on IPFS and the resulting CID is usable in the img tags src property.

6

You have a couple of options:

  1. You can “wrap” the file in a directory, giving it a name.
  2. You can append ?filename=myfile.png to the end of the URL.
1 Like
7

Ah thanks again, extremely helpful.