DEV Community

Cover image for Send Files to IPFS using Pinata API in ReactJS
Fidal Mathew
Fidal Mathew

Posted on


Send Files to IPFS using Pinata API in ReactJS

Hi fellow readers, I hope you’re doing good. Web3 is an amazing space and every day there is something new to learn no matter how experienced you are. In this article, I’m gonna talk about how we can upload files to IPFS using Pinata API.

Before moving on, let's talk a little about IPFS. IPFS/ InterPlanetary File System is a protocol and peer-to-peer network for storing and sharing data in a distributed file system. Many companies provide this service, for example: Pinata, which we’re gonna work on in this article.

First, to work with Pinata IPFS, create an account on Pinata. We need API keys to work with their API. Therefore, in the top right corner, click on the profile option and click on the API Keys option.

API key

Now, keep the Admin option on because you’d like to pin files to the IPFS and enter any name you’d like. It will now generate a new API_KEY along with a SECRET_KEY. Store both the details in a ".env.local" file present at the root of the React App folder as:

Enter fullscreen mode Exit fullscreen mode

Make sure to install dotenv npm package using: npm i dotenv

So, let's define a useState hook to manage the content of the file.

    const [fileImg, setFileImg] = useState(null);
Enter fullscreen mode Exit fullscreen mode

Note: Don’t forget import {useState} from ‘react’;

The next thing we need is a function to check whether we are having an empty file, if not we will be sending that file using the Pinata API.

    const sendFileToIPFS = async (e) => {

        if (fileImg) {
            try {

                const formData = new FormData();
                formData.append("file", fileImg);

                const resFile = await axios({
                    method: "post",
                    url: "",
                    data: formData,
                    headers: {
                        'pinata_api_key': `${process.env.REACT_APP_PINATA_API_KEY}`,
                        'pinata_secret_api_key': `${process.env.REACT_APP_PINATA_API_SECRET}`,
                        "Content-Type": "multipart/form-data"

                const ImgHash = `ipfs://${}`;
//Take a look at your Pinata Pinned section, you will see a new file added to you list.   

            } catch (error) {
                console.log("Error sending File to IPFS: ")
Enter fullscreen mode Exit fullscreen mode

Finally, let's define what we’re gonna return. We are calling a function sendFiletoIPFS() when the form is submitted, and the value of the file is gonna be[0].

<form onSubmit={sendFileToIPFS}>
<input type="file" onChange={(e) =>setFileImg([0])} required />
<button type='submit' >Mint NFT</button>            
Enter fullscreen mode Exit fullscreen mode

You can learn more about how to send JSON data, remove files from IPFS, etc in the API documentation by Pinata.
I hope you learned how to send files to Pinata IPFS in a React Application. If you have any queries, feel free to connect with me on:

If you want to mint an NFT with IPFS API, you can take a look at my project page here:

Till then, keep hacking!😊

Top comments (5)

joshuajee profile image
Joshua Evuetapha

Should the pinata endpoint be called from the frontend? Or backend?

fidalmathew profile image
Fidal Mathew

Since, Pinata is typically used for blockchain projects, it doesn't have a backend server. Nevertheless, I would recommend using it at the frontend rather than backend. It's your choice, it's just an API call.

joshuajee profile image
Joshua Evuetapha

Alright, i was just worried that the API keys could be abused by a malicious user on the frontend

Thread Thread
fidalmathew profile image
Fidal Mathew

That's a point, but you can store it using .env files even at frontend.

Thread Thread
joshuajee profile image
Joshua Evuetapha

They would still be available on the client side

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!