dappuniversity / nft_marketplace

145 stars 186 forks source link

ipfs image upload error: HTTPError: project id required #9

Open Bhakti087 opened 1 year ago

Bhakti087 commented 1 year ago

image

BCWeb3 commented 1 year ago

I have this error too. Any help would be greatly appreciated.

BCWeb3 commented 1 year ago

I think this is an access issue to Infura's IPFS. Maybe take a look at the following issue page which has updates for Infura and Pinata.

https://github.com/dappuniversity/nft_marketplace/issues/5

Coin-Spark commented 1 year ago

Yes @BCWeb3 this is the reason is not working anymore... since Infura closed their free ipfs node on august 2022.

Now you need to access it with a project id and a secret key. You can do it as following:

1 npm i buffer

2 Go to infura.io and create a new IPFS project, you have to fill your credit card details for it to work.. but you have 5gb free and then you pay few cents for every request that exceed the 5GB. once you created it, pick your projectId and secret key from there.

3 on create page do the following ( i commented whats not needed anymore):

import { useState } from "react";
import { ethers } from "ethers";
import { Row, Form, Button } from "react-bootstrap";
import { Buffer } from "buffer";
import { create as ipfsHttpClient } from "ipfs-http-client";

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

const projectId = "your infura project ID";
const projectSecret = "your infura secretKey";
const subdomain = "YOUR_SUBDOMAIN_NAME.infura-ipfs.io";
// Pay attentnion at the space between Basic and the $ in the next line
// encrypt the authorization
const authorization = `Basic ${Buffer.from(`${projectId}:${projectSecret}`).toString("base64")}`;

// with this next variable, you are passing the necessary information in the request to infura, notice authorization
// is being passed as argument headers
const client = ipfsHttpClient({
  host: "infura-ipfs.io",
  port: 5001,
  protocol: "https",
  headers: {
    authorization: authorization,
  },
});

then below, in the same file you change these 2 lines:

// setImage(`https://ipfs.infura.io/ipfs/${result.path}`)
setImage(`${subdomain}/ipfs/${result.path}`);

// const uri = `https://ipfs.infura.io/ipfs/${result.path}`
const uri = `${subdomain}/ipfs/${result.path}`;
BCWeb3 commented 1 year ago

Thank you so much @Coin-Spark I followed your very clear and helpful instructions and I can now upload and view NFTs. Great!

YashasHR commented 1 year ago

where do we get our subdomain name

dhiraj-02 commented 1 year ago

Thank you so much @Coin-Spark I followed your very clear and helpful instructions and I can now upload and view NFTs. Great!

i can view nfts on ipfs server, but those are not seen on my dashboard, please help

dhruvv173 commented 1 year ago

Hey @ethan-crypto, a few people are facing this issue while uploading NFTs to Infura IPFS. It is due to them removing the public domain and now, everyone should have a enabled custom domain to upload a NFT to IPFS. I have the solved this issue and have the changes ready with code. Can you assign this task to me?

ethan-crypto commented 1 year ago

Sure. Let me do that asap. Sent from my iPhoneOn Apr 24, 2023, at 2:41 PM, Dhruv @.***> wrote: Hey @ethan-crypto, a few people are facing this issue while uploading NFTs to Infura IPFS. It is due to them removing the public domain and now, everyone should have a enabled custom domain to upload a NFT to IPFS. I have the solved this issue and have the changes ready with code. Can you assign this task to me?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

dhruvv173 commented 1 year ago

Hey @ethan-crypto I have opened a PR with the fixed code. Could you check it and merge?

upendra-eth commented 1 year ago

Hello, I've solved all the issues you're experiencing while watching this video in 2023, explained the solution in a video to make it more beginner-friendly, and also uploaded the updated code to my git repository. Please find all links below

Video link - https://youtu.be/rHBuddTLzR0