How to mint NFT with button trigger using Metaplex SDK

NFT
1

I’m trying to set up NFT minting functionality with Metaplex when a user clicks a button on my web app. I already have the image files and JSON metadata stored locally in my project directory. My goal is to programmatically upload these assets and mint the NFT through a simple button press event.

Here’s what I’m working with:

const handleMintNFT = async () => {
  // Need to implement minting logic here
  const artworkFile = './assets/dragon_artwork.png';
  const metadataInfo = {
    name: 'Fire Dragon',
    description: 'Rare mythical creature',
    image: artworkFile
  };
  
  // How do I connect this to Metaplex?
};

return (
  <button onClick={handleMintNFT}>
    Mint My NFT
  </button>
);

What’s the proper way to integrate the Metaplex SDK to handle the upload and minting process? Any guidance would be appreciated.

2

hey @Ray84! this looks like a fun project :fire:

Have you set up your wallet connection and metaplex instance yet? You’ll need those before you can mint anything. Also, are you hitting solana mainnet or devnet?

Your code’s using ‘./assets/dragon_artwork.png’ as a local path - you’ll need to read that file as a buffer first before uploading.

What’s your plan for error handling? Like if the upload fails or the user’s short on SOL for fees?

Btw, why not use the newer umi framework? I’ve seen more devs switching from the older metaplex sdk lately. Just curious what made you go the traditional route.

Can’t wait to see how this turns out!

3

First, upload your artwork to IPFS or Arweave - local paths won’t work with Metaplex. I ran into the same issue and bundlrStorage in Metaplex saved me. Once it’s uploaded, use the metadata URI you get back in your minting function. Make sure you’ve got your Metaplex instance set up with an RPC endpoint and wallet first. The uploadMetadata method makes uploading both your image and metadata way easier.