Thank you @arielbk! Really helpful!
I'll supplement some details.
First, put the infura personal project id and project secret to .env and make sure to add .env to .gitignore:
.env
.gitignore
INFURA_IPFS_PROJECT_ID="....." INFURA_IPFS_PROJECT_SECRET=".....
Second, set env in next.config.js:
next.config.js
const nextConfig = { reactStrictMode: true, env: { INFURA_IPFS_PROJECT_ID: process.env.INFURA_IPFS_PROJECT_ID, INFURA_IPFS_PROJECT_SECRET: process.env.INFURA_IPFS_PROJECT_SECRET, }, } module.exports = nextConfig
Third, change the code in create-item.js
create-item.js
The import and const:
import
const
import { create } from 'ipfs-http-client' const projectId = process.env.INFURA_IPFS_PROJECT_ID const projectSecret = process.env.INFURA_IPFS_PROJECT_SECRET const projectIdAndSecret = `${projectId}:${projectSecret}` const auth = `Basic ${Buffer.from(projectIdAndSecret).toString('base64')}` const client = create({ host: 'ipfs.infura.io', port: 5001, protocol: 'https', headers: { authorization: auth, }, })
And in the function CreateItem():
CreateItem()
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}` client.pin.add(added.path).then((res) => { console.log(res) setFileUrl(url) }) } catch (error) { console.log('Error uploading file: ', error) } } async function createItem() { 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, pass the URL to save it on Polygon createSale(url) } catch (error) { console.log('Error uploading file: ', error) } }
Hey, I tried everything here but I get message: "Request failed with status code 400"
Do the suggestion above with the Auth header and also...
In your Infura IPFS Project, enable the dedicated gateway then replace:
const url = https://ipfs.infura.io/ipfs/${added.path}
https://ipfs.infura.io/ipfs/${added.path}
const url = https://DEDICATED_GATEWAY_URL/ipfs/${added.path}
https://DEDICATED_GATEWAY_URL/ipfs/${added.path}
This requires a credit card on file on Infura.
Does this solution take care of creating an IPFS project (giving credit card info) ??? i dont see how.
Yes because it allows you to use the dedicated gateway which gives you a URL like - nftmarketplace.infura-ipfs.io. Otherwise the old way in the tutorial no longer works on Infura.
Hi @arealclimber and @joninsley appreciated, able to run the flow, but may I know what is the differences between client.add and client.pin.add.
Thanks so much!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thank you @arielbk! Really helpful!
I'll supplement some details.
First, put the infura personal project id and project secret to
.env
and make sure to add.env
to.gitignore
:Second, set env in
next.config.js
:Third, change the code in
create-item.js
The
import
andconst
:And in the function
CreateItem()
:Hey, I tried everything here but I get message: "Request failed with status code 400"
Do the suggestion above with the Auth header and also...
In your Infura IPFS Project, enable the dedicated gateway then replace:
const url =
https://ipfs.infura.io/ipfs/${added.path}
const url =
https://DEDICATED_GATEWAY_URL/ipfs/${added.path}
This requires a credit card on file on Infura.
Does this solution take care of creating an IPFS project (giving credit card info) ??? i dont see how.
Yes because it allows you to use the dedicated gateway which gives you a URL like - nftmarketplace.infura-ipfs.io. Otherwise the old way in the tutorial no longer works on Infura.
Hi @arealclimber and @joninsley appreciated, able to run the flow, but may I know what is the differences between client.add and client.pin.add.
Thanks so much!