# React Hooks for IPFS Uploads

Source: https://pinata.cloud/blog/react-hooks-for-ipfs-uploads
Kiwi News: https://news.kiwistand.com/stories/React-Hooks-for-IPFS-Uploads?index=0x6840038586928c39c8232cdfb084d468f61cbfc1198bb87e36e90ba5bf96749bfe808d1d
Submitted by tim on 2025-06-04 UTC, 2 upvotes, 0 comments

## Summary

Pinata has released React Hooks, a optional sub-package of its SDK (pinata/react), to simplify uploading files to IPFS from client-side React apps. The central hook, useUpload, provides upload, progress, pause, resume and cancel controls, plus an uploadResponse value. The upload method automatically switches to resumable chunked uploads for files larger than 100MB and requires a server that returns Presigned URLs. Developers can then use the convert function to turn the returned CID into a usable IPFS link.

## Article

Pinata is always evolving its developer tooling to provide the best experience to users, and today we’re excited to announce React Hooks for Pinata! React is, without a doubt, one of the most popular client side frameworks for building apps, and users have always looked for the best way to upload files inside React. With Pinata’s React Hooks, we now provide a more robust, secure, end to end solution for uploading files to Pinata. Let’s dive in to how you can start using them today!

First install the hooks using the same Pinata SDK you know and love.

npm i pinata

The React Hooks are part of a sub package called pinata/react, so they are totally optional if you choose to not use them. This package includes primary pieces which you can import like so:

import { useUpload, convert } from "pinata/react"

At the core of this package is useUpload, which provides a multitude of helpful tools for uploading from the client. Here’s a quick overview of what you get.

const { upload, // Method to upload a file using a presigned URL progress, // Progress state as integer loading, // Boolean uploading state uploadResponse, // Either full Upload Response or just a CID if you use Resumable Uploads error, // Error state pause, // Pause upload method resume, // Resume upload method cancel, // Cancel current upload method } = useUpload();

The upload method is where the magic happens. It contains the ability to use either one piece uploads or resumable chunked uploads if the file is larger than 100MB, all handled automatically so you don’t need to worry about when to use it. In order for it to work, you’ll need a server that returns Presigned URLs (which can be done in just a few lines of code). Here’s the upload function in action:

const handleUpload = async () => { if (!file) return; const urlRes = await fetch(`${import.meta.env.VITE_SERVER_URL}/presigned_url`); const urlData = await urlRes.json(); try { // Use the upload function from useUpload hook await upload(file, "public", urlData.url, { metadata: { name: file.name || "Upload from Web", keyvalues: { app: "Pinata Web Demo", timestamp: Date.now().toString(), }, }, }); } catch (uploadError) { console.error("Upload error:", uploadError); } };

All we have to do is pass in our file selected by the user, our network identifier "public" to designate if we want public or private IPFS, then the urlData.url aka Presigned URL to provide a secure upload experience. From there, we can add optional metadata such as name or keyvalues. Once it’s finished uploading, our uploadResponse will populate and we can use our convert function to get a usable IPFS link to access it.

if (uploadResponse && !link) { async function setIpfsLink() { const ipfsLink = await convert(uploadResponse.cid, "<https://ipfs.io>"); setLink(ipfsLink); } setIpfsLink(); }

That simple! Client side uploads have never been easier, so be sure to check out the Pinata SDK React Hooks today with the official documentation. If you haven’t tried Pinata there’s never a better time than now to give it a shot; sign up today and get the best possible developer experience with IPFS.

Happy Pinning!