IPFS image upload error #5
Comments
|
i also facing same issue |
I'm not sure but I think it's about infura img hosting |
|
@ethan-crypto facing the same issue, anyone please tell me how to solve this issue |
|
Hi thanks for addressing this issue. I'll try to fix it this weekend when I have some free time. |
|
This error occure because ipfs infura deprecating the public gateway on August 10th, 2022. Please check steps to resolve that error :- npm install --save buffer After that do the following changes in a code const ipfsClient = require('ipfs-http-client'); const client = ipfsClient.create({ 2] setImage( 3] const uri = |
|
@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 |
|
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 |
|
is there any way to use platforms other than Infura? |
|
yes you can use Pinata |
Hey there! Can you please provide the code that you used with pinata? I'll be very thankful! |
|
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
<#5 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASCGPRQSLZKHQH3CIFK7PRTV65AWNANCNFSM5URLUFZA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
|
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? |
|
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 (
<BrowserRouter>
<div className="App">
<>
<Navigation web3Handler={web3Handler} account={account} />
</>
<div>
{loading ? (
<div style={{ display: 'flex', justifyContent: 'center',
alignItems: 'center', minHeight: '80vh' }}>
<Spinner animation="border" style={{ display: 'flex' }} />
<p className='mx-3 my-0'>Awaiting Metamask Connection...</p>
</div>
) : (
<Routes>
<Route path="/" element={
<Home marketplace={marketplace} nft={nft} />
} />
<Route path="/create" element={
<Create marketplace={marketplace} nft={nft} auction =
{auction}/>
} />
<Route path="/my-listed-items" element={
<MyListedItems marketplace={marketplace} nft={nft}
account={account} />
} />
<Route path="/my-purchases" element={
<MyPurchases marketplace={marketplace} nft={nft}
account={account} latestBlock={latestBlock} />
} />
</Routes>
)}
</div>
<FooterCom/>
</div>
</BrowserRouter>
);
}
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...</h2>
</main>
)
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 (
<div className="flex justify-center">
<section style={{ backgroundColor: '#9e003a' }}
className="jumbotron breadcumb no-bg h-vh landingcolor">
<SliderMain />
</section>
<br />
<br />
<br />
<section className="container no-bottom">
<div className="col-lg-12">
<div className="text-start hdbr">
<h2>LIVE buy</h2>
</div>
</div>
{items.length > 0 ?
<>
<div className="col-lg-12">
<div className=' nft' >
<Carousel responsive={responsive} >
{items.map((item, idx) => (
<Col key={idx} className="" style={{ marginLeft: '40px' }}>
<Card style={{ width: '14rem', height: '24rem' }}>
<Outer>
<Card.Img style={{ borderRadius: '5px',
padding: '12px' }} variant="top" src={"data:image/png;base64," +
item.image} />
</Outer>
<Card.Body color="secondary">
<Card.Title>{item.name}</Card.Title>
<Card.Text>
{item.description}
</Card.Text>
</Card.Body>
<Card.Footer>
<div className='d-grid'>
<Button className="btn-main" onClick={()
=> buyMarketItem(item)} style={{ color: '#ffffff', backgroundColor:
'#9e003a' }} >
Buy for
{ethers.utils.formatEther(item.totalPrice)} ETH
</Button>
</div>
</Card.Footer>
</Card>
</Col>
))}
</Carousel>
</div></div>
<div className="col-lg-12" >
<div className="col-lg-12">
<div className="text-start hdbr">
<h2>POPULAR COLLECTION</h2>
{/* <div className="small-border"></div> */}
</div>
</div>
</div>
<div className='col-lg-12' >
<Carousel responsive={responsive} >
{items.map((item, idx) => (
<Col key={idx} className="" style={{ marginLeft: '40px' }}>
<Card style={{ width: '14rem', height: '20rem' }}>
<Outer>
<Card.Img style={{ borderRadius: '5px',
padding: '12px', }} variant="top" src={"data:image/png;base64," +
item.image} />
</Outer>
<Card.Body color="secondary">
<Card.Title>{item.name}</Card.Title>
<Card.Text>
{item.description}
</Card.Text>
</Card.Body>
</Card>
</Col>
))}
</Carousel>
</div>
</>
: (
<main style={{ padding: "1rem 0" }}>
<h2>No listed assets</h2>
</main>
)}
</section>
</div>
);
}
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 (
<>
<section className='jumbotron breadcumb no-bg' style={{
backgroundImage: `url(${img1})`, padding: '30px' }}>
<div className='mainbreadcumb'>
<div className='container'>
<div className='row m-10-hor'>
<div className='col-12'>
<h1 className='text-center' style={{ color: 'white',
fontSize: '50px' }}>Create</h1>
<p style={{ color: 'white' }}>{waiting}</p>
</div>
</div>
</div>
</div>
</section>
<div className="container-fluid mt-5">
<div className="row">
<main role="main" className="col-lg-12 mx-auto" style={{
maxWidth: '1000px' }}>
<div className="content mx-auto">
<Row className="g-4">
{/* <Form.Control
type="file"
required
name="file"
onChange={(e) => setImage(e.target.value)}
// onChange={uploadToIPFS}
/> */}
<input type="file" onChange={(e) =>
setImage(e.target.files[0])} required />
<Form.Control onChange={(e) =>
setName(e.target.value)} size="lg" required type="text"
placeholder="Name" />
<Form.Control onChange={(e) =>
setDescription(e.target.value)} size="lg" required as="textarea"
placeholder="Description" />
<Form.Control onChange={(e) =>
setPrice(e.target.value)} size="lg" required type="number"
placeholder="Price in ETH" />
<div className="d-grid px-0">
<Button onClick={createNFT} variant="primary" size="lg">
Create & List NFT!
</Button>
</div>
</Row>
</div>
</main>
</div>
</div>
</>
);
}
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: ***@***.***>
|
|
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)
|
|
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:
***@***.***>
|
|
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](https://github.com/notifications/unsubscribe-auth/A3GPZ6RLJGWNCTMNDMLP43TWAHL4JANCNFSM5URLUFZA).
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. |
|
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
<#5 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AWL4FFQ7JEWT6HHX44QGAF3V55QVVANCNFSM5URLUFZA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
can you please elaborate this, creating is working fine but the retrieval of those to the dashboard is not working |
|
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 |
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?
The text was updated successfully, but these errors were encountered: