How do I use on-chain event listener to obtain erc721 tokenID & then upload image and json to file storage?

Iā€™m building a project where the PFP artwork is assembled by the user in real-time. You can play around with the canvas here and build the pfp

I went through the Moralis docs and the 2 videos which show how to setup the event listener in the Moralis dashboard, and how to write the cloud function. So far so good.

However I have some queries:

  1. I will setup to listen to the Transfer(address from, address to, uint256 tokenId) event from my smart contract when a user mints the NFT they have built on the front-end.

  2. Then I can use this tokenID and use the Filebase (SIA decentralized storage) APIs in a cloud function and upload the json metadata file to Filebase. This json will also have the PNG image url (
    But how do I send my PNG which is on my React Canvas (front-end) to Filebase now? And save it as tokenID.png?
    I understand Cloud function has Nodejs support but not external libraries. Or else I would have re-created the canvas & image inside the cloud function.

function saveImage() {
        let imageToSave = new Image();
        imageToSave.src = hiddenCanvas.current.toDataURL('image/png', 1.0);

Should I send the image to Moralis server too?
OR should I forget the cloud function completely and obtain the tokenID stored on Moralis server on event emission and use it to send json/PNG from my front-end itself? I assume there is a security risk in this approach? But if I have to do this what hook should I use to obtain this tokenID saved in my Moralis dashboard column?
@DappThatApp @PatrickAlphaC since you all have addressed event listeners in other threads perhaps you could share insights?

you can send data to a cloud function, in that data you can send your image, for example encoded in base64, and after you have the image contents in cloud code, then you can upload it somewhere else.

I assume that you know already how to listen to events and how to get them saved in a database table.

1 Like

Yes I know that, it was very well illustrated in the doc videos. Thanks :slight_smile:
@cryptokid only flipside I see to this approach is exploiters could send whatever they want from front-end. Security.