Skip to main content

useStorageUpload

Hook for uploading files to IPFS and retrieving the IPFS URI.

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

API key​

You will require an API key to use thirdweb’s storage services with the SDK. If you haven’t created a key yet you can do so for free from the thirdweb dashboard.

You can then obtain a clientId from the API key which you will need to pass to the ThirdwebProvider component:

import { ThirdwebProvider } from "@thirdweb/react";

const App = () => {
  return (
    <ThirdwebProvider clientId="YOUR_CLIENT_ID">
      <YourApp />
    </ThirdwebProvider>
  );
};

Usage​

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

function App() {
  const { mutateAsync: upload } = useStorageUpload();
}

Configuration​

rewriteFileNames (optional)​

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 { useStorageUpload } from "@thirdweb-dev/react";

function App() {
  const { mutateAsync: upload } = useStorageUpload({
    rewriteFileNames: {
      fileStartNumber: 1,
    },
  });
}

uploadWithGatewayUrl (optional)​

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

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

function App() {
  const { mutateAsync: upload } = useStorageUpload({
    uploadWithGatewayUrl: true,
  });
}

onProgress (optional)​

Callback that gets triggered when file upload progresses.

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

function App() {
  const { mutateAsync: upload } = useStorageUpload({
    onProgress: (progress) => {
      console.log(progress);
    },
  });
}

uploadWithoutDirectory (optional)​

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

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

function App() {
  const { mutateAsync: upload } = useStorageUpload({
    uploadWithoutDirectory: true,
  });
}