Is it possible to upload an image to ARWeave using the metaplex JS SDK?

Question

Note: There's a similar question Upload image and metadata to arweave by using `@metaplex-foundation/js` whose accepted answer is "I tried it, it doesn't work, don't use metaplex to upload the image"

So, asking directly: Is it possible to upload an image to ARWeave using the metaplex JS SDK? Ie without making a second ARWeave client?

The Metaplex docs don't seem to have examples of uploading a binary (PNG, MP4 etc) using Metaplex with ARWeave storage.

The Solana Cookbook simply avoids using metaplex to upload the image at all:

 const arweave = Arweave.init({
    host: "arweave.net",
    port: 443,
    protocol: "https",
    timeout: 20000,
    logging: false,
  });

  // Upload image to Arweave
  const data = fs.readFileSync("./code/nfts/arweave-upload/lowres-dog.png");

  const transaction = await arweave.createTransaction({
    data: data,
  });

  transaction.addTag("Content-Type", "image/png");

  const wallet = JSON.parse(fs.readFileSync("wallet.json", "utf-8"))
  
  await arweave.transactions.sign(transaction, wallet);

  const response = await arweave.transactions.post(transaction);
  console.log(response);

  const id = transaction.id;
  const imageUrl = id ? `https://arweave.net/${id}` : undefined;

Answer 1

Yep, it'd be something like this using Metaplex's bundlrStorage plugin:

import { bundlrStorage, keypairIdentity, Metaplex, toMetaplexFile } from "@metaplex-foundation/js"
import { clusterApiUrl, Connection, Keypair } from "@solana/web3.js"
import * as fs from "fs"

const keypair = Keypair.fromSecretKey(...)

// Connection endpoint, switch to a mainnet RPC if using mainnet
const ENDPOINT = clusterApiUrl('devnet')

// Devnet Bundlr address
const BUNDLR_ADDRESS = "https://devnet.bundlr.network"

const connection = new Connection(ENDPOINT)

const nfts = Metaplex
  .make(connection, { cluster: 'devnet' })
  .use(keypairIdentity(keypair))
  .use(bundlrStorage({
    address: BUNDLR_ADDRESS,
    providerUrl: ENDPOINT,
    timeout: 60000
  }))
  .nfts();

const imageBuffer = fs.readFileSync("path/to/image.jpg")
const file = toMetaplexFile(imageBuffer, "image.jpg")

const uploadedMetadata = await nfts.uploadMetadata({
  name: "NFT_NAME",
  symbol: "NFT_SYMBOL",
  description: "NFT_DESCRIPTION",
  image: file,
})

console.log(`Uploaded metadata: ${uploadedMetadata.uri}`)

Slightly modified from this complete example:

Output is eg:

"Uploaded metadata: https://arweave.net/mAbxQsdFYQNRFPqWHNzZbkwVw6LFp3k9LvRTxuZpVXk "

Answer 2

Yes. Here's an example to upload and Mint an NFT using Metaplex JS SDK: https://www.quicknode.com/guides/solana-development/how-to-mint-an-nft-on-solana-using-typescript.