CODEWITHSUNDEEP
reactjsblockchainipfs
Umer Arif
Umer Arif

Reputation: 37

Data not uploading to IPFS ( Error uploading file: HTTPError: project id required)

I am working on a NFT marketplace and today, I found out that I can't upload data to the IPFS using http-client. Yesterday, the data was uploading perfectly fine but now it does not upload to the IPFS and existing IPFS URLs also does not return any JSON data. Instead it returns

Public Gateway Is Not Supported Anymore - Setup a Dedicated Gateway

These are the functions that I am using to upload data to IPFS :

  const [fileUrl, setFileUrl] = useState(null);
  const [formInput, updateFormInput] = useState({
    price: "",
    name: "",
    description: "",
  });

  async function onChange(e) {
    const file = e.target.files[0];
    try {
      const added = await client.add(file, {
        progress: (prog) => console.log(`received: ${prog}`),
      });
      const url = `https://ipfs.infura.io/ipfs/${added.path}`;
      setFileUrl(url);
      console.log(fileUrl);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  }
  async function uploadToIPFS() {
    const { name, description, price } = formInput;
    if (!name || !description || !price || !fileUrl) return;
    /* first, upload to IPFS */
    const data = JSON.stringify({
      name,
      description,
      image: fileUrl,
    });
    try {
      const added = await client.add(data);
      const url = `https://ipfs.infura.io/ipfs/${added.path}`;
      /* after file is uploaded to IPFS, return the URL to use it in the transaction */
      console.log(url);
      return url;
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  }

Upvotes: 0

Views: 1259

Answers (2)

Hritik Raheja
Hritik Raheja

Reputation: 21

IPFS infura has deprecated the public gateways, i.e. it is not available after 10th August, 2022. You can use dedicated gateway by the following steps-

  1. Login to IPFS infura.
  2. Select ipfs from the top left corner where all products is written.
  3. Create an ipfs project. This will require your card details, but you will not be charged upto a quota that is provided in the stats).
  4. After creating the project, click on manage key and select enable dedicated server.

Click here to view

Upvotes: 2

ATian
ATian

Reputation: 36

I am facing the same issue, i think Infura require us create new IPFS project and have to implements projectId and projectSecret to our code

import { create } from 'ipfs-http-client'

const projectId = process.env.NEXT_PUBLIC_INFURA_IPFS_PROJECT_ID
const projectSecret = process.env.NEXT_PUBLIC_INFURA_IPFS_PROJECT_SECRET
const projectIdAndSecret = `${projectId}:${projectSecret}`

const client = create({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https',
  headers: {
    authorization: `Basic ${Buffer.from(projectIdAndSecret).toString(
      'base64'
    )}`,
  },
})

Upvotes: 2

Related Questions