Upload an image into a NFT

[nicolapertosa]

Hi,
I'm trying to upload an image to IPFS. But there is no informations regarding IPFS in Ternoa's documentation. Could you please guide me with some examples ? Also, do we need to use Ternoa's IPFS domain (https://ipfs.ternoa.dev/) to manage our contents / medias ? Or is there any function in the SDK that we can use that automatically uploads on IPFS?
Thank you in advance for your answer

[nicolapertosa]

I found your workshop repository which already gives me a lot of answer. But I still need some more clarification regarding IPFS. Do we need to host our own IPFS instance on our own server or can we use existing Ternoa's IPFS instance ? Means if we want to upload a media or any content, what will be the IPFS_GATEWAY we need to use ? Also, if we want to create a NFT containing a secret, can it be done without Ternoa's IPFS instance ?

[nicolapertosa]

@markopoloparadox ? Can a developer answer to my question please ? :)

[markopoloparadox]

Please have patience. It's the month of vacations and a lot of people are unavailable. My summer vacation days literally ended today.

[markopoloparadox]

Let me at least answer some of your questions. It seems that we are indeed missing a nice doc on how to use our IPFS nodes. The good thing is that we are planing to write one or two examples in our SDK repo which is going to show how to use our IPFS nodes in order to upload NFT data and NFT metadata.

You don't need to use our IPFS nodes and you can host your own nodes or even store the data inside aws or your own server. This is up to you.

@ipapandinas @Victor-Salomon I think that you can guys explain a bit better how the process looks like
@soufiane-bouchaara I think you could tell us what exactly gateway to use for either alphanet or mainnet.

[ipapandinas]

Hi,

The IPFS upload helper is not implemented in the SDK yet. It will be added quiet soon and will be similar to the one used during our workshop here: https://github.com/capsule-corp-ternoa/ternoa-workshop/blob/main/helpers/ipfs.ts. Nice catch to have found it!

As @markopoloparadox explains, you have flexibility in choosing the IPFS node: you can use our Ternoa's IPFS instance (https://ipfs.ternoa.dev/) or you can host your own instance.
Be careful to write the off-chains metadata correctly to ensure compatibility with our tools such as the Wallet for example. Minimal required fields are:

Ternoa basic NFT Off-Chain Metadata - object:

- title: Title of the NFT - string
- description: Description of the NFT - string
- image: IPFS hash of the NFT's asset - string
- properties: An object containing NFT's properties and at least a Media object - object
	- media: An object containing NFT's asset properties - object (see below)


media - object:
- hash : IPFS hash of the NFT asset - string
- type: Type of media (file format) - string
- size: size of the encrypted media - string

Ternoa Collection Off-Chain Metadata - object:

- banner_image: IPFS hash of the collection's banner image - string
- name: Name of the collection - string
- description: Description of the collection - string
- profile_image: IPFS hash of the avatar/profile image assigned to the collection - string

Ternoa Marketplace Off-Chain Metadata - object:

- name: Name of the marketplace - string
- logo_uri: Logo URI of the marketplace - string

Regarding secret NFTs there are not implemented on either Alphanet/Mainnet yet. This will be the objective of phase 4. You also will have the same flexibility as basic NFTs regarding the IPFS instance. You will just have to write the metadatas correctly.

Sorry for this late response, I hope it helps you.

[brucelane]

Thanks for the fields, I tryed to implement that with ternoa-js version 1.2.0-rc0, but my ipfs image url (using CreateNft or CreateCollection ) doesn't show up in the Ternoa Wallet.
Can I ask for a sample json file to verify the syntax using these fields?

[ipapandinas]

Here is the json metadata for our Builder Badge minted during Ternoa ParisDOTcomm's workshop: https://ipfs.ternoa.dev/ipfs/QmZpEjF76D5ZkQD2Z9ct5N4Eo2fzcPQEMGFybAVhYCYoWZ

You need to do 2 IPFS uploads:

• a first one with your NFT asset (e.g. your image)
• a second one with your json metadata file, including your asset's hash like this:

{
  "title": "Ternoa Builder Badge",
  "description": "This badge is the gateway to the Ternoa Builders Experience.",
  "image": "Qmf5RHhnUjSCfCN9d1Ee6sUWxe3Eqvogw1cTsssrxAxtPn",                      // 👈 YOUR ASSET IPFS HASH
  "properties": {
    "media": {
      "hash": "Qmf5RHhnUjSCfCN9d1Ee6sUWxe3Eqvogw1cTsssrxAxtPn",                   // 👈 YOUR ASSET IPFS HASH
      "name": "Glass_Cube.gif",
      "size": 6504265,
      "type": "image/gif"
    }
  }
}

[brucelane]

thanks!
Do I have to upload to ipfs.ternoa.dev or I can use my own assets server (ipfs or not mandatory?) to make the image appear in the Ternoa wallet app?

[ipapandinas]

The best practice is to store your metadata into IPFS if you want to display your NFT in the Ternoa Wallet app. You can upload on our node ipfs.ternoa.dev sending a POST request to /api/v0/add route like this:

export const uploadFiles = async (file: File) => {
  try {
    const formData = new FormData()
    formData.append(`file`, file)
    const response = await axios
      .request({
        method: 'post',
        url: 'https://ipfs.ternoa.dev/api/v0/add',
        data: formData,
      })
      .catch((err) => {
        throw new Error(err)
      })
    console.log(response.data)
  } catch (err) {
    throw err
  }
}

Some examples of IPFS helpers can be found here: https://github.com/capsule-corp-ternoa/ternoa-workshop/blob/main/helpers/ipfs.ts

Otherwise you can use another IPFS node provider or even your own node, it doesn't matter.

[brucelane]

perfect, thank you

[nicolapertosa]

Hi @ipapandinas,

I tried using your upload method in nodeJs, so from the back-end side (and not from the client) and I got error response HTTP 403.
Do you know the reason why the IPFS route returns status code "forbidden"?
Please find below the code I used :

import axios from "axios"
import FormData from "form-data"
import * as fs from 'fs';

const IPFS_UPLOAD_URL = 'https://ipfs.ternoa.dev';

export const uploadFiles = async (file) => {
    try {
        const formData = new FormData()
        formData.append(`file`, file)
        const response = await axios
            .request({
                method: 'post',
                url: `${IPFS_UPLOAD_URL}/add/api/v0`,
                data: formData,
            })
            .catch((err) => {
                throw new Error(err)
            })
        return response.data
    } catch (err) {
        throw err
    }
}

(async () => {
    const result = await uploadFiles(fs.createReadStream('./assets/images/test.png'));
    console.log(result);
})().catch((e) => {
    console.log(e);
});

Thank you in advance for your help.

[Victor-Salomon]

Hi @nicolapertosa
You might have an issue with the endpoint since you received a 403.

I think your IPFS endpoint is not correct :
https://ipfs.ternoa.dev/api/v0/add should work.
In your endpoint, the /add/ is in the middle right after the base url (the IPFS_UPLOAD_URL const), instead of at the end

Let us know if it works now.

[nicolapertosa]

Hi @Victor-Salomon,

Yes, that was my issue. This is working fine now, thank you very much for your help :)

[brucelane]

I am still stuck on the metadata (1st parameter of createNftTx or createNft): description and image don't show up in the Ternoa Wallet app...

[ipapandinas]

hi,
the 1st parameter of createNftTx refers to the offchain data of your NFT: Off-chain related NFT metadata. Can be an IPFS Hash, an URL or plain text. (from our dev documentation here)
We use it as an IPFS hash of the NFT's json metadata file in the Ternoa Wallet.
Here is an example of a compatible json structure: Ternoa Builder Pass, so the json file IPFS hash is QmZpEjF76D5ZkQD2Z9ct5N4Eo2fzcPQEMGFybAVhYCYoWZ.

{
  "title": "Ternoa Builder Badge",
  "description": "This badge is the gateway to the Ternoa Builders Experience.",
  "image": "Qmf5RHhnUjSCfCN9d1Ee6sUWxe3Eqvogw1cTsssrxAxtPn",
  "properties": {
    "media": {
      "hash": "Qmf5RHhnUjSCfCN9d1Ee6sUWxe3Eqvogw1cTsssrxAxtPn",
      "name": "Glass_Cube.gif",
      "size": 6504265,
      "type": "image/gif"
    }
  }
}

As you can see in the json file there is an image field with another IPFS hash, this is the NFT asset hash available here.

To summarize here is the full workflow to upload a wallet compatible NFT to IPFS:

1. Upload the NFT asset using the uploadFiles function detailed previously here. This will return an object containing a hash field referring to the IPFS hash of the asset. (e.g. Qmf5RHhnUjSCfCN9d1Ee6sUWxe3Eqvogw1cTsssrxAxtPn in the json file structure just above ☝️)
2. Upload the NFT's json metadata file using again the uploadFiles function. This json file contains the NFT title and description. The previous asset hash is used in the image field but also in properties > media > hash field. The uploadFiles function will return again an object containing a hash field referring to the IPFS hash of the json metadata file this time. (e.g. QmZpEjF76D5ZkQD2Z9ct5N4Eo2fzcPQEMGFybAVhYCYoWZ ifor the Ternoa Builder Pass just above ☝️)
3. Finally use the createNftTx from the ternoa-js SDK passing the IPFS hash of the json metadata file as 1st parameter (e.g. QmZpEjF76D5ZkQD2Z9ct5N4Eo2fzcPQEMGFybAVhYCYoWZ ifor the Ternoa Builder Pass just above ☝️)