IPFS image upload error

[natsuki07]

I've copied and pasted all of the codes from the repo. I got IPFE upload error below.

const result = await client.add(file) causes the error. How can I solve this error?

[JasVavdiya]

i also facing same issue

[Adylitto]

I've copied and pasted all of the codes from the repo. I got IPFE upload error below.

const result = await client.add(file) causes the error.

How can I solve this error?

I'm not sure but I think it's about infura img hosting

[iamrishav]

@ethan-crypto facing the same issue, anyone please tell me how to solve this issue

[ethan-crypto]

Hi thanks for addressing this issue. I'll try to fix it this weekend when I have some free time.

[Mukund0079]

This error occure because ipfs infura deprecating the public gateway on August 10th, 2022.

Please check steps to resolve that error :- https://github.com/Mukund0079/blockchain-error/issues/1#issuecomment-1219115018 or Follow Below steps:- Create a IPFS project by putting card details on (https://infura.io/product/ipfs) Enable Dedicated Getway give any subdomain name.

npm install --save buffer

After that do the following changes in a code 1] import { useState } from 'react' import { ethers } from "ethers" import { Row, Form, Button } from 'react-bootstrap' import { Buffer } from 'buffer';

const ipfsClient = require('ipfs-http-client'); const projectId = '---Enter projectID from infura.io project---'; const projectSecret = '---Enter project secrate key from infura.io project---'; const auth = 'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');

const client = ipfsClient.create({ host: 'ipfs.infura.io', port: 5001, protocol: 'https', headers: { authorization: auth, }, });

2] setImage(https://(your gatway name).infura-ipfs.io/ipfs/${result.path}) // add your gatway name here you will get it from infura.io after enabling dedicated gatway

3] const uri = https://(your gatway name).infura-ipfs.io/ipfs/${result.path} // add your gatway name here you will get it from infura.io after enabling dedicated gatway

[marte462]

@Mukund0079 The above code doesn't work. Did you get this to work on your side? I have changed create.js with the above code and the NFTs do not load

[Mukund0079]

@Mukund0079 The above code doesn't work. Did you get this to work on your side? I have changed create.js with the above code and the NFTs do not load

Please follow steps after creating account on Infura it's worked for me try this once again

[marte462]

many thanks, using your code @Mukund0079 I redeployed. But the NFTs don't get displayed due to some SSL error. I assume you have the same issue with Infura. More information here: https://community.infura.io/t/ipfs-authentication-error-403-forbidden/5672/76

[Mukund0079]

many thanks, using your code @Mukund0079 I redeployed. But the NFTs don't get displayed due to some SSL error. I assume you have the same issue with Infura. More information here: https://community.infura.io/t/ipfs-authentication-error-403-forbidden/5672/76

Disconnect all VPN and try it will work I have already resolved SSL issu

[roshangeorge97]

is there any way to use platforms other than Infura?

[syeddaniyal0304]

yes you can use Pinata I have used Pinata and it worked well for me Code: import { pinJSONToIPFS } from "./pinata.js"; const pinataResponse1 = await pinJSONToIPFS(metadata);

[IvayloSlavchev]

yes you can use Pinata I have used Pinata and it worked well for me Code: import { pinJSONToIPFS } from "./pinata.js"; const pinataResponse1 = await pinJSONToIPFS(metadata);

Hey there! Can you please provide the code that you used with pinata? I'll be very thankful!

[syeddaniyal0304]

import axios from 'axios'; const key = ''; const secret = '' export const pinJSONToIPFS = async(JSONBody) => { const url = https://api.pinata.cloud/pinning/pinJSONToIPFS; return axios .post(url, JSONBody, { headers: { pinata_api_key: key, pinata_secret_api_key: secret, } }) .then(function (response) { return { success: true, pinataUrl: "https://gateway.pinata.cloud/ipfs/" + response. data.IpfsHash }; }) .catch(function (error) { console.log(error) return { success: false, message: error.message, }

    });

};

code to call this pinata: const pinataResponse1 = await pinJSONToIPFS(metadata);

  if (!pinataResponse1.success) {
    setwaiting('Error try again')
    return {
      success: false,
      status: "Something went wrong while uploading your tokenURI.",

    };
  }
  const tokenURI = pinataResponse1.pinataUrl;

On Sun, 18 Sept 2022 at 21:40, Ivaylo Slavchev @.***> wrote:

yes you can use Pinata I have used Pinata and it worked well for me Code: import { pinJSONToIPFS } from "./pinata.js"; const pinataResponse1 = await pinJSONToIPFS(metadata);

Hey there! Can you please provide the code that you used with pinata? I'll be very thankful!

— Reply to this email directly, view it on GitHub https://github.com/dappuniversity/nft_marketplace/issues/5#issuecomment-1250344691, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASCGPRQSLZKHQH3CIFK7PRTV65AWNANCNFSM5URLUFZA . You are receiving this because you commented.Message ID: @.***>

[BCWeb3]

Hello there, I'd like to update with the Pinata code above which I'm grateful has been provided, but I'm new to development and I don't understand where to place this code within the Create.js file. I have tried a few places and I'm receiving errors, I have removed what I believe to be used for Infura. I'd be really grateful if you could provide a few novice tips please?

[syeddaniyal0304]

App.js import { BrowserRouter, Routes, Route } from "react-router-dom"; import Navigation from './Navbar'; import Home from './Home.js' import Create from './Create.js' import MyListedItems from './MyListedItems.js' import MyPurchases from './MyPurchases.js' import Marketplace from './abis/Marketplace.json' import NFT from './abis/NFT.json' import Auction from './abis/newMaeketplace.json' import { useState } from 'react' import { ethers } from "ethers" import { Spinner } from 'react-bootstrap'

import './App.css'; import FooterCom from "./components/FooterCom";

function App() { const [loading, setLoading] = useState(true) const [account, setAccount] = useState(null) const [nft, setNFT] = useState({}) const [marketplace, setMarketplace] = useState({}) const [auction, setAuction] = useState({}) const [latestBlock, setLatestBlock] = useState(null) // MetaMask Login/Connect const web3Handler = async () => { const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); setAccount(accounts[0]) // Get provider from Metamask const provider = new ethers.providers.Web3Provider(window.ethereum) // Set signer const signer = provider.getSigner() const block = await provider.getBlockNumber() setLatestBlock(block); window.ethereum.on('chainChanged', (chainId) => { window.location.reload(); })

window.ethereum.on('accountsChanged', async function (accounts) {
  setAccount(accounts[0])
  await web3Handler()
})
loadContracts(signer)
console.log(signer)

} const loadContracts = async (signer) => { // Get deployed copies of contracts const marketplace = new ethers.Contract("0x7A87e841b2F4CBD9E1FFe03e151a9E322232801C", Marketplace.abi, signer) setMarketplace(marketplace) const nft = new ethers.Contract("0xf704Ad28D2f3C164DE96A1013D8EA5a666d9B498", NFT.abi, signer) setNFT(nft) // 9236b6B9c44D2b226Dd82Fc82eF53AEEf094AcbF 4E37cf85729523598bD766d8782d60B2F6cc9d72 const auction = new ethers.Contract("0xDA82Dc03617111e0b95A42cA0796B87A597eb780",Auction.abi,signer) setAuction(auction); setLoading(false) console.log(marketplace) }

return (

<>

{loading ? (

Awaiting Metamask Connection...

) : ( } /> } /> } /> } /> )}

); }

export default App; ////////////////////////

Home.js

import React, { useState, useEffect } from 'react' import { ethers } from "ethers" import { Col, Card, Button } from 'react-bootstrap' import { Buffer } from 'buffer'; import SliderMain from './components/SliderMain'; import styled from "styled-components"; import Carousel from "react-multi-carousel"; import "react-multi-carousel/lib/styles.css";

const Outer = styled.div display: flex; justify-content: center; align-content: center; align-items: center; ;

const Home = ({ marketplace, nft }) => { const [loading, setLoading] = useState(true) const [items, setItems] = useState([]) const [Aucitems, setAucItems] = useState([])

const loadMarketplaceItems = async () => { // Load all unsold items const itemCount = await marketplace.itemCount() let items = [] for (let i = 1; i <= itemCount; i++) { const item = await marketplace.items(i) if (!item.sold) { // get uri url from nft contract const uri = await nft.tokenURI(item.tokenId) // use uri to fetch the nft metadata stored on ipfs const response = await fetch(uri) const metadata = await response.json() // get total price of item (item price + fee) const totalPrice = await marketplace.getTotalPrice(item.itemId) // Add item to items array const img = new Buffer.from(metadata.image.buffer).toString("base64") items.push({ totalPrice, itemId: item.itemId, seller: item.seller, name: metadata.name, description: metadata.description, image: img }) } }

setItems(items)
setLoading(false)

} // const loadMarketplaceAuctionItems = async () => {

// const itemCount = await marketplace.itemCount() // let items = [] // for (let i = 1; i <= itemCount; i++) { // const item = await marketplace.items(i)

// if (!item.sold && item.auction) { // const uri = await nft.tokenURI(item.tokenId) // const response = await fetch(uri) // const metadata = await response.json() // // const minPrice = Auction.startPrice; // // const bidAmount = Auction.bidAmount; // const img = new Buffer.from(metadata.image.buffer).toString("base64") // items.push({ // itemId: item.itemId, // seller: item.seller, // name: metadata.name, // description: metadata.description, // image: img // }) // }

// } // setAucItems(items); // console.log(Aucitems) // // }

// const makeBid = async (item) => { // const price = 0.06 // const listingPrice = ethers.utils.parseEther(price.toString()) // await (await marketplace.makeBid(item.itemId, listingPrice)).wait() // //loadMarketplaceItems() // }

const buyMarketItem = async (item) => { await (await marketplace.purchaseItem(item.itemId, { value: item.totalPrice })).wait() loadMarketplaceItems() }

useEffect(() => { loadMarketplaceItems() //loadMarketplaceAuctionItems(); }, []) if (loading) return ( <main style={{ padding: "1rem 0" }}> <h2 style={{ marginTop: '120px', marginBottom: '120px' }}>Loading... ) const responsive = { superLargeDesktop: { // the naming can be any, depends on you. breakpoint: { max: 4000, min: 3000 }, items: 5 }, desktop: { breakpoint: { max: 3000, min: 1024 }, items: 4 }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 2 }, mobile: { breakpoint: { max: 464, min: 0 }, items: 1 } } return (

LIVE buy

{items.length > 0 ? <>

{items.map((item, idx) => ( {item.name} {item.description}

buyMarketItem(item)} style={{ color: '#ffffff', backgroundColor: '#9e003a' }} > Buy for {ethers.utils.formatEther(item.totalPrice)} ETH

))}

POPULAR COLLECTION

{/*

*/}

{items.map((item, idx) => ( {item.name} {item.description} ))}

: (

No listed assets

)}

); } export default Home ///////////////////////////////// Create.js import { useState } from 'react' import { ethers } from "ethers" import { Row, Form, Button } from 'react-bootstrap' import { Buffer } from 'buffer'; import { pinJSONToIPFS } from "./pinata.js"; import img1 from './subheader.jpg' const Create = ({ marketplace, nft,auction }) => { const [image, setImage] = useState('') const [price, setPrice] = useState(null) const [name, setName] = useState('') const [description, setDescription] = useState('') const [buffer, setBuffer] = useState(null) const [waiting, setwaiting] = useState('') const createNFT = async () => { if (!image || !price || !name || !description) return try { // var f = new File([""], "filename.txt", {type: "text/plain", lastModified: '101010'}) //console.log(f) //console.log(image) const sample = {}; sample.name = image.name; const file = image.name const reader = new window.FileReader() reader.readAsArrayBuffer(image) //reader.readAsText(file); reader.onloadend = () => { setBuffer({ buffer: Buffer(reader.result) }) console.log('buffer', buffer) } if (buffer === null) { return } setwaiting('Wait...') const metadata = {}; metadata.name = name; metadata.image = buffer; metadata.description = description; const pinataResponse1 = await pinJSONToIPFS(metadata); if (!pinataResponse1.success) { setwaiting('Error try again') return { success: false, status: "Something went wrong while uploading your tokenURI.", }; } const tokenURI = pinataResponse1.pinataUrl; //console.log(tokenURI) //const result = await client.add(JSON.stringify({image, price, name, description})) // const result = await JSON.stringify({image, price, name, description}) // console.log(result) mintThenList(tokenURI) } catch (error) { console.log("ipfs uri upload error: ", error) } } const mintThenList = async (result) => { const uri = result console.log(uri) // mint nft //await (await nft.mint(uri)).wait() const hash = await nft.mint(uri) // get tokenId of new nft // approve marketplace to spend nft await (await nft.setApprovalForAll(auction.address, true)).wait() //await (await nft.setApprovalForAll(marketplace.address, true)).wait() // add nft to marketplace const listingPrice = ethers.utils.parseEther(price.toString()) const id = await nft.tokenCount() //console.log(id) // await (await marketplace.makeItem(nft.address, id, listingPrice)).wait() await (await auction.createTokenAuction( nft.address,id,listingPrice,1663874148)).wait() console.log('complete mint and list') setwaiting('') } return ( <>

Create

{waiting}

{/* setImage(e.target.value)} // onChange={uploadToIPFS} /> */} setImage(e.target.files[0])} required /> setName(e.target.value)} size="lg" required type="text" placeholder="Name" /> setDescription(e.target.value)} size="lg" required as="textarea" placeholder="Description" /> setPrice(e.target.value)} size="lg" required type="number" placeholder="Price in ETH" />

Create & List NFT!

); } export default Create On Wed, 21 Sept 2022 at 21:43, BCWeb3 ***@***.***> wrote: > > Hello there, I'd like to update with the Pinata code above which I'm grateful has been provided, but I'm new to development and I don't understand where to place this code within the Create.js file. I have tried a few places and I'm receiving errors, I have removed what I believe to be used for Infura. I'd be really grateful if you could provide a few novice tips please? > > — > Reply to this email directly, view it on GitHub, or unsubscribe. > You are receiving this because you commented.Message ID: ***@***.***>

[BCWeb3]

Hello, really appreciate the response. I have pasted the code into the various files within my project but have the following errors. I'm taking a look through to see if I can make it work. But thought I'd post in case there's anything obvious going on or something I need to do. Thanks.

Failed to compile.

SyntaxError: /home/sirhc/nft-marketplace/src/frontend/components/App.js: Identifier directly after number. (61:4) 59 | setNFT(nft) 60 | // 9236b6B9c44D2b226Dd82Fc82eF53AEEf094AcbF

61 | 4E37cf85729523598bD766d8782d60B2F6cc9d72 | ^

[syeddaniyal0304]

I can't solve like this. Do you have whatsapp or messenger So I can't explain you. And Gmail is not allowing me to send the complete project file

On Mon, Sep 26, 2022, 10:17 PM BCWeb3 @.***> wrote:

Hello, really appreciate the response. I have pasted the code into the various files within my project but have the following errors. I'm taking a look through to see if I can make it work. But thought I'd post in case there's anything obvious going on or something I need to do. Thanks.

Failed to compile.

SyntaxError: /home/sirhc/nft-marketplace/src/frontend/components/App.js: Identifier directly after number. (61:4) 59 | setNFT(nft) 60 | // 9236b6B9c44D2b226Dd82Fc82eF53AEEf094AcbF

61 | 4E37cf85729523598bD766d8782d60B2F6cc9d72 | ^

[image: Screenshot_20220926_181052] https://user-images.githubusercontent.com/114097402/192338995-abd3a1df-8c6e-4b63-9e38-012ca0f40c76.png

— Reply to this email directly, view it on GitHub https://github.com/dappuniversity/nft_marketplace/issues/5#issuecomment-1258366812, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASCGPRQ5WW2B3EMOREWYRB3WAHLDVANCNFSM5URLUFZA . You are receiving this because you commented.Message ID: @.***>

[BCWeb3]

Hello, fair enough.

I'm unsure how to private message or perhaps this email is private now. I'm new to Github.

Regarding gmail. You could send the project using a service like the following

https://wetransfer.com/

Here's an email address you can contact me on @. I see my email has been out... If you did use 'We Transfer' you can select a 'transfer link' instead of entering a recipient's email address and post here - just a thought.

Thank you for your help.

------- Original Message ------- On Monday, September 26th, 2022 at 18:24, Syed Daniyal Ahmed Shah @.***> wrote:

I can't solve like this. Do you have whatsapp or messenger So I can't explain you. And Gmail is not allowing me to send the complete project file

On Mon, Sep 26, 2022, 10:17 PM BCWeb3 @.***> wrote:

Hello, really appreciate the response. I have pasted the code into the various files within my project but have the following errors. I'm taking a look through to see if I can make it work. But thought I'd post in case there's anything obvious going on or something I need to do. Thanks.

Failed to compile.

SyntaxError: /home/sirhc/nft-marketplace/src/frontend/components/App.js: Identifier directly after number. (61:4) 59 | setNFT(nft) 60 | // 9236b6B9c44D2b226Dd82Fc82eF53AEEf094AcbF

61 | 4E37cf85729523598bD766d8782d60B2F6cc9d72 | ^

[image: Screenshot_20220926_181052] https://user-images.githubusercontent.com/114097402/192338995-abd3a1df-8c6e-4b63-9e38-012ca0f40c76.png

— Reply to this email directly, view it on GitHub https://github.com/dappuniversity/nft_marketplace/issues/5#issuecomment-1258366812, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASCGPRQ5WW2B3EMOREWYRB3WAHLDVANCNFSM5URLUFZA . You are receiving this because you commented.Message ID: @.***>

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

[Bhakti087]

Hello, fair enough. I'm unsure how to private message or perhaps this email is private now. I'm new to Github. Regarding gmail. You could send the project using a service like the following https://wetransfer.com/

Here's an email address you can contact me on @. I see my email has been out... If you did use 'We Transfer' you can select a 'transfer link' instead of entering a recipient's email address and post here - just a thought. Thank you for your help. … ------- Original Message ------- On Monday, September 26th, 2022 at 18:24, Syed Daniyal Ahmed Shah @.> wrote: I can't solve like this. Do you have whatsapp or messenger So I can't explain you. And Gmail is not allowing me to send the complete project file On Mon, Sep 26, 2022, 10:17 PM BCWeb3 @.> wrote: > Hello, really appreciate the response. I have pasted the code into the > various files within my project but have the following errors. I'm taking a > look through to see if I can make it work. But thought I'd post in case > there's anything obvious going on or something I need to do. Thanks. > > Failed to compile. > > SyntaxError: /home/sirhc/nft-marketplace/src/frontend/components/App.js: > Identifier directly after number. (61:4) > 59 | setNFT(nft) > 60 | // 9236b6B9c44D2b226Dd82Fc82eF53AEEf094AcbF > > 61 | 4E37cf85729523598bD766d8782d60B2F6cc9d72 > | ^ > > [image: Screenshot_20220926_181052] > https://user-images.githubusercontent.com/114097402/192338995-abd3a1df-8c6e-4b63-9e38-012ca0f40c76.png > > — > Reply to this email directly, view it on GitHub > <#5 (comment)>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/ASCGPRQ5WW2B3EMOREWYRB3WAHLDVANCNFSM5URLUFZA > . > You are receiving this because you commented.Message ID: > @.> > — Reply to this email directly, [view it on GitHub](#5 (comment)), or unsubscribe. You are receiving this because you commented.Message ID: @.>

Hey did you find the solution ?

[BCWeb3]

Hello, fair enough. I'm unsure how to private message or perhaps this email is private now. I'm new to Github. Regarding gmail. You could send the project using a service like the following https://wetransfer.com/

Here's an email address you can contact me on @. I see my email has been out... If you did use 'We Transfer' you can select a 'transfer link' instead of entering a recipient's email address and post here - just a thought. Thank you for your help. … ------- Original Message ------- On Monday, September 26th, 2022 at 18:24, Syed Daniyal Ahmed Shah @.**> wrote: I can't solve like this. Do you have whatsapp or messenger So I can't explain you. And Gmail is not allowing me to send the complete project file On Mon, Sep 26, 2022, 10:17 PM BCWeb3 @.**> wrote: > Hello, really appreciate the response. I have pasted the code into the > various files within my project but have the following errors. I'm taking a > look through to see if I can make it work. But thought I'd post in case > there's anything obvious going on or something I need to do. Thanks. > > Failed to compile. > > SyntaxError: /home/sirhc/nft-marketplace/src/frontend/components/App.js: > Identifier directly after number. (61:4) > 59 | setNFT(nft) > 60 | // 9236b6B9c44D2b226Dd82Fc82eF53AEEf094AcbF > > 61 | 4E37cf85729523598bD766d8782d60B2F6cc9d72 > | ^ > > [image: Screenshot_20220926_181052] > https://user-images.githubusercontent.com/114097402/192338995-abd3a1df-8c6e-4b63-9e38-012ca0f40c76.png > > — > Reply to this email directly, view it on GitHub > <#5 (comment)>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/ASCGPRQ5WW2B3EMOREWYRB3WAHLDVANCNFSM5URLUFZA > . > You are receiving this because you commented.Message ID: > @._> > — Reply to this email directly, [view it on GitHub](#5 (comment)), or unsubscribe. You are receiving this because you commented.Message ID: _@_._>

Hey did you find the solution ?

I haven't managed to get it to work yet - I'm trying to with Pinata. It appears some have got it to work with Infura above, and Pinata - so it's worth reading this thread. I think I'm not getting it to work because I'm new to this and missing the point here or there.

[roshangeorge97]

I hope we have some update in the moralis documentation finally on this, but thanks for sharing!

On Mon, Sep 12, 2022, 22:48 Syed Daniyal Ahmed Shah < @.***> wrote:

yes you can use Pinata I have used Pinata and it worked well for me Code: import { pinJSONToIPFS } from "./pinata.js"; const pinataResponse1 = await pinJSONToIPFS(metadata);

— Reply to this email directly, view it on GitHub https://github.com/dappuniversity/nft_marketplace/issues/5#issuecomment-1244049856, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWL4FFQ7JEWT6HHX44QGAF3V55QVVANCNFSM5URLUFZA . You are receiving this because you commented.Message ID: @.***>

[dhiraj-02]

many thanks, using your code @Mukund0079 I redeployed. But the NFTs don't get displayed due to some SSL error. I assume you have the same issue with Infura. More information here: https://community.infura.io/t/ipfs-authentication-error-403-forbidden/5672/76

Disconnect all VPN and try it will work I have already resolved SSL issu

can you please elaborate this, creating is working fine but the retrieval of those to the dashboard is not working

[upendra-eth]

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