useStorage

Hook for uploading files and directories to storage.

import { useStorage } from "@thirdweb-dev/react";

Usage

import { useStorage, Web3Button } from "@thirdweb-dev/react";

function App() {
  const storage = useStorage();
  if (!storage) {
    return <div>Please connect a wallet</div>;
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        storage.uploadBatch(files, {
          rewriteFileNames: {
            fileStartNumber: 1,
          },
          uploadWithGatewayUrl: true,
          onProgress: (event) => console.log("upload progress", event),
          uploadWithoutDirectory: false,
        })
      }
    >
      Upload
    </Web3Button>
  );
}

Configuration

rewriteFileNames

If specified, will rewrite file names to numbers for use on-chain.

Useful to use with NFT contracts that map token IDs to files.

import { useStorage, Web3Button } from "@thirdweb-dev/react";

function App() {
  const storage = useStorage();
  if (!storage) {
    return <div>Please connect a wallet</div>;
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        storage.uploadBatch(files, {
          rewriteFileNames: {
            fileStartNumber: 1,
          },
          uploadWithGatewayUrl: true,
          onProgress: (event) => console.log("upload progress", event),
          uploadWithoutDirectory: false,
        })
      }
    >
      Upload
    </Web3Button>
  );
}

uploadWithGatewayUrl

If specified, any URLs with schemes will be replaced with resolved URLs before upload.

import { useStorage, Web3Button } from "@thirdweb-dev/react";

function App() {
  const storage = useStorage();
  if (!storage) {
    return <div>Please connect a wallet</div>;
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        storage.uploadBatch(files, {
          rewriteFileNames: {
            fileStartNumber: 1,
          },
          uploadWithGatewayUrl: true,
          onProgress: (event) => console.log("upload progress", event),
          uploadWithoutDirectory: false,
        })
      }
    >
      Upload
    </Web3Button>
  );
}

onProgress

Callback that gets triggered when file upload progresses.

import { useStorage, Web3Button } from "@thirdweb-dev/react";

function App() {
  const storage = useStorage();
  if (!storage) {
    return <div>Please connect a wallet</div>;
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        storage.uploadBatch(files, {
          rewriteFileNames: {
            fileStartNumber: 1,
          },
          uploadWithGatewayUrl: true,
          onProgress: (event) => console.log("upload progress", event),
          uploadWithoutDirectory: false,
        })
      }
    >
      Upload
    </Web3Button>
  );
}

uploadWithoutDirectory

If specified, will upload a single file without wrapping it in a directory.

import { useStorage, Web3Button } from "@thirdweb-dev/react";

function App() {
  const storage = useStorage();
  if (!storage) {
    return <div>Please connect a wallet</div>;
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        storage.uploadBatch(files, {
          rewriteFileNames: {
            fileStartNumber: 1,
          },
          uploadWithGatewayUrl: true,
          onProgress: (event) => console.log("upload progress", event),
          uploadWithoutDirectory: false,
        })
      }
    >
      Upload
    </Web3Button>
  );
}