Error 401 with Error uploading file: HTTPError: project id require

The error is above.

So basically I have created a simple market to upload NFTs locally.

Everything works fine except when I try to upload the NFT. It does go through when I try to upload it but it blocks the listing with the error above.

The code for the create item where I make use of infura is:

import { useState } from 'react'
import { ethers } from 'ethers'
import { create as ipfsHttpClient } from 'ipfs-http-client'
import { useRouter } from 'next/router'
import Web3Modal from 'web3modal'

const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0')

import {
  nftaddress, nftmarketaddress
} from '../config'

import NFT from '../artifacts/contracts/NftC.sol/NftC.json'
import Market from '../artifacts/contracts/MarketC.sol/MarketC.json'


export default function CreateItem() {
  const [fileUrl, setFileUrl] = useState(null)
  const [formInput, updateFormInput] = useState({ price: '', name: '', description: '' })
  const router = useRouter()

  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)
    } 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 */
      listNFTForSale(url)
    } catch (error) {
      console.log('Error uploading file: ', error)
    }  
  }

  async function listNFTForSale(url) {
    // const url = await uploadToIPFS()
    const web3Modal = new Web3Modal()
    const connection = await web3Modal.connect()
    const provider = new ethers.providers.Web3Provider(connection)
    const signer = provider.getSigner()

    /* create the item */
    let contract = new ethers.Contract(nftaddress, NFT.abi, signer)
    let transaction = await contract.createToken(url)
    let tx = await transaction.wait()

    let event = tx.events[0]
    let value = event.args[2]
    let tokenId = value.toNumber()

    const price = ethers.utils.parseUnits(formInput.price, 'ether')
    contract = new ethers.Contract(nftmarketaddress, Market.abi, signer)
    let listingPrice = await contract.getListingPrice()
    listingPrice = listingPrice.toString()
    transaction = await contract.createMarketItem(nftaddress, tokenId, price, { value: listingPrice})
    await transaction.wait()
   
    router.push('/')
  }

Hi @lyokonora1234, welcome to the forums!

I can’t see in your code where you add the authentication header to the IPFS upload request:

Does this help?

Warm regards,
Chris | Infura | ConsenSys

This is the only part of the code that I have used infura. It used to work but now it doesn’t.

I am sorry I am quite inexperienced, so what you gave me does not really help me much.

  • I haven’t touched the project since July so I have forgotten quite a bit about this.

In what way can I apply this to help me fix it.

Hi @lyokonora1234 ,

this might help:

You need to add the authorisation header when you create your client.

Warm regards,
Chris | Infura | ConsenSys

I see now thanks, I fixed that part, but now it says that my project id or project secret is invalid.
I got the API Keys directly from my project settings, but it seems to not recognize them.

How are you building the auth header? Can you show your code?