thirdwebDocs
GitHub

useStorageUpload

Defined in

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

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

Example

import { useStorageUpload } from "@thirdweb-dev/react";
 
export default function Component() {
  const { mutateAsync: upload, isLoading } = useStorageUpload();
 
  async function uploadData() {
    const filesToUpload = [...];
    const uris = await upload({ data: files });
    console.log(uris);
  }
 
  return (
    <button onClick={uploadData}>
      Upload
    </button>
  )
}
function useStorageUpload(
  uploadOptions?: T,
): UseMutationResult<
  Array<string>,
  unknown,
  StorageUploadOptions<T>,
  unknown
>;

Parameters

Type

let uploadOptions: T;

Returns

let returnType: UseMutationResult<
  Array<string>,
  unknown,
  StorageUploadOptions<T>,
  unknown
>;