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
Define “up to IPFS”. Are you using js-ipfs? A local IPFS daemon? Infura?
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)
You need to decode the base64 data into a buffer, then add that.
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.
You have a couple of options:
- You can “wrap” the file in a directory, giving it a name.
- You can append
?filename=myfile.png to the end of the URL.
Ah thanks again, extremely helpful.