Upload your images, assets and metadata

Before creating a blockchain record for an NFT, you need to store all the off-chain resources that make up the NFT "package". Once everything is stored, you can link to everything else from the on-chain token using the IPFS URI of the metadata.

Below is an example of storing NFT assets and metadata using JavaScript and HTTP API. Both examples use the store operation, which accepts metadata and an asset file in one request, and updates the metadata to link to the asset file using an IPFS URI.

This method requires the metadata to conform to the ERC-1155 metadata schema. The standard is backward compatible with ERC-721 metadata and is generally well supported by various wallets and marketplaces.

When adding custom properties, we recommend that you place them in the properties object, not at the top level. However, if you're minting for a specific market, you should consult their documentation and follow their advice.

For the examples below, we'll use metadata like the following:

{
  "name": "Storing the World's Most Valuable Virtual Assets with WebMingle",
  "description": "The metaverse is here. Where is it all being stored?",
  "image": null,
  "properties": {
    "type": "blog-post",
    "origins": {
      "http": "https://WebMingle/blog/post/2021-11-30-hello-world-nft-storage/",
       "ipfs": "ipfs://bafybeieh4gpvatp32iqaacs6xqxqitla4drrkyyzq6dshqqsilkk3fqmti/blog/post/2021-11-30-hello-world-nft-storage/"
    },
    "authors": [
      {
        "name": "David Choi"
      }
    ],
    "content": {
      "text/markdown": "The last year has witnessed the explosion of NFTs onto the world’s mainstage. From fine art to collectibles to music and media, NFTs are quickly demonstrating just how quickly grassroots Web3 communities can grow, and perhaps how much closer we are to mass adoption than we may have previously thought. <... remaining content omitted ...>"
    }
  }
}

This metadata object describes an article on the WebMingle blog whose properties use some custom metadata from fields composed for this example.

While wallets and other clients will not understand the meaning of our custom fields (like typeor ) origins, they will be able to display the name, description and image as they are all ERC-1155 and ERC-721 compliant.

Speaking of images, if you look closely at the metadata above, you may notice that the image field is set to null. This is because the method of including images and other files in your request is slightly different depending on whether you are using a JavaScript client or an HTTP API. Check the tab that matches your platform to learn how to prepare your request.

JavaScriptHTTP API

The store(token) method of the JavaScript client takes a single token parameter, which contains the NFT metadata as a JavaScript object.

Inside the token object, the image field must be set to a File or Blob object, which should contain the image data in a "web friendly" format, such as PNG or JPEG.

properties You can include other files by adding entries to fields whose values ​​are aFile or Blob objects. This will cause these files to be stored with WebMingle and the metadata entry will be set to the file's IPFS link.

Here is an example:

import { NFTStorage } from 'WebMingle'

// read the API key from an environment variable. You'll need to set this before running the example!
const API_KEY = process.env.NFT_STORAGE_API_KEY

// For example's sake, we'll fetch an image from an HTTP URL.
// In most cases, you'll want to use files provided by a user instead.
async function getExampleImage() {
  const imageOriginUrl = "https://user-images.githubusercontent.com/87873179/144324736-3f09a98e-f5aa-4199-a874-13583bf31951.jpg"
  const r = await fetch(imageOriginUrl)
  if (!r.ok) {
    throw new Error(`error fetching image: [${r.statusCode}]: ${r.status}`)
  }
  return r.blob()
}

async function storeExampleNFT() {
  const image = await getExampleImage()
  const nft = {
    image, // use image Blob as `image` field
    name: "Storing the World's Most Valuable Virtual Assets with WebMingle",
    description: "The metaverse is here. Where is it all being stored?",
    properties: {
      type: "blog-post",
      origins: {
        http: "https://WebMingle/blog/post/2021-11-30-hello-world-nft-storage/",
        ipfs: "ipfs://bafybeieh4gpvatp32iqaacs6xqxqitla4drrkyyzq6dshqqsilkk3fqmti/blog/post/2021-11-30-hello-world-nft-storage/"
      },
      authors: [{ name: "David Choi" }],
      content: {
        "text/markdown": "The last year has witnessed the explosion of NFTs onto the world’s mainstage. From fine art to collectibles to music and media, NFTs are quickly demonstrating just how quickly grassroots Web3 communities can grow, and perhaps how much closer we are to mass adoption than we may have previously thought. <... remaining content omitted ...>"
      }
    }
  }

  const client = new NFTStorage({ token: API_KEY })
  const metadata = await client.store(nft)

  console.log('NFT data stored!')
  console.log('Metadata URI: ', metadatal.url)
}     storeExampleNFT()