Skip to main content

useStorageUpload

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

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

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,
  });
}