thirdwebDocs
GitHub

Upload Files to IPFS

Upload and pin files and directories directly to IPFS using the dashboard, CLI or via a client or server environment using SDKs.

Upload files to IPFS using dashboard

To upload files using dashboard:

  • Connect Wallet

    To authenticate to your account, connect your wallet.

  • Storage Dashboard

    Navigate to the storage dashboard

    storage diagram

  • Select files

    Select your files or drag them into the upload box. Confirm that your files are correct, and then select "Start Upload.”

    storage diagram

  • Access via Gateway

    Upon completion, the corresponding IPFS addresses refers to where your content is stored on the IPFS Network. You may access these files using your unique gateway URL.

    storage diagram

Upload files to IPFS using CLI

To upload files using the CLI, use the upload command and specify the relative path to the file name.

npx thirdweb@latest upload path/to/file.extension

Upload multiple files

To upload multiple files, specify all the file names separated with spaces:

npx thirdweb upload image1.png image2.png image3.png

Upload entire directory

To upload an entire directory, specify the relative directory name:

npx thirdweb upload directory_name

Upload files to IPFS using SDKs

    // Initialize your provider
    import { ThirdwebProvider } from "@thirdweb-dev/react";
 
    function Provider() {
    return (
        <ThirdwebProvider
        clientId="YOUR_CLIENT_ID" // You can get a client id from dashboard settings
        activeChain="goerli"
        >
        ...
        </ThirdwebProvider>
    );
    }
 
    // Upload files to IPFS
    import { useStorageUpload } from "@thirdweb-dev/react";
 
    function App() {
    const { mutateAsync: upload } = useStorageUpload();
 
    const uploadData = () => {
        // Get any data that you want to upload
        const dataToUpload = [...];
 
        // And upload the data with the upload function
        const uris = await upload({ data: dataToUpload });
    }
    ...
    }
 
    // Render files from IPFS
    import { MediaRenderer } from "@thirdweb-dev/react";
 
    function App() {
    return (
        // Supported types: image, video, audio, 3d model, html
        <MediaRenderer src="ipfs://QmamvVM5kvsYjQJYs7x8LXKYGFkwtGvuRvqZsuzvpHmQq9/0" />
    );
    }