How to upload files and images using umi

Question

How do I upload my NFT assets using umi from Metaplex.

The docs are in this page. https://github.com/metaplex-foundation/umi/blob/main/docs/storage.md

Is there a tutorial or code snippet of how I can do this? Any storage provider is okay. Even if it's centrialized.

Answer 1

Umi AWS Storage

Umi has an UploaderInterface, which you can see the documentation for here. Umi's umi-uploader-aws allows you to create an awsUploader when you create your Umi interface:

import { createUmi } from '@metaplex-foundation/umi-bundle-defaults';
import { walletAdapterIdentity } from '@metaplex-foundation/umi-signer-wallet-adapters';
import { awsUploader } from '@metaplex-foundation/umi-uploader-aws';
import { myProgramRepository } from '../plugins';

const umi = createUmi('https://api.mainnet-beta.solana.com')
  .use(walletAdapterIdentity(...))
  .use(awsUploader(...))
  .use(myProgramRepository());

This code snippet is from their interfaces.md doc which you can access here. You can read more about the AWS uploader and how it works here.

The code for awsUploader can be found here. Instead of the ellipsis, you'll want to pass in your client and your bucketName which are of type S3Client and string, respectively. If you are interested in creating and using Amazon S3 Buckets then I'd recommend checking out their documentation.

Umi NFT Storage

For NFTs specifically, Umi has the module umi-uploader-nft-storage which you can read more about here. I'd recommend taking a look at the functions createNftStorageUploader and nftStorageUploader, specifically.

The Metaplex docs also contains a reference on how to upload JSON data to the storage provider of your choice using the Umi library. Their code is as follows:

import { nftStorage } from "@metaplex-foundation/umi-uploader-nft-storage";
umi.use(nftStorage());

And then you can use the upload and uploadJson methods of the uploader interface to upload your assets and their JSON metadata:

import { createGenericFileFromBrowserFile } from "@metaplex-foundation/umi";

// Upload the asset.
const file = await createGenericFileFromBrowserFile(event.target.files[0]);
const [fileUri] = await umi.uploader.upload([file]);

// Upload the JSON metadata.
const uri = await umi.uploader.uploadJson({
  name: "My NFT #1",
  description: "My description",
  image: fileUri,
});

The above code can be found here.

Hopefully this helps! Remember to install any of the necessary npm packages before trying to use them. If you have any further questions don't hesitate to reach out! I also recommend you check out the new Metaplex docs