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 (
clientId="YOUR_CLIENT_ID" // You can get a client id from dashboard settings
// 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" />