Infura IPFS does not work!

[Christian]

Hi @Jassan888, welcome to our community!

Could you share an example of a full URL that returns a 404 error? Are you seeing this error when trying to access the file in your browser, or through code?

[Jassan888]

The error is in the browser. My frontend is nextjs so all of it is running in test off of url:http port3000. If that makes any sense

[traian.vila]

@Jassan888

http://ipfs.io:5001/api/v0

Hey, this doesn’t look like the Infura api, take a look here: HTTP API methods | INFURA

[Jassan888]

Hello this is for a blockchain NFT project. Do I still need to install python in the command prompt for it to work?
Here is the full up load code.

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 {
marketplaceAddress
} from ‘…/config’

import NFTMarketplace from ‘…/artifacts/contracts/NFTMarketplace.sol/NFTMarketplace.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 */
return url
} catch (error) {
console.log('Error uploading file: ', error)
}
}

This is way more confusing.

[Flaveeu]

@Jassan888 You should run the ipfs-http-client library using node by executing your file name in your terminal with: node [filename].js

Please also check the installation guide for IPFS HTTP Client

js-ipfs/packages/ipfs-http-client at master · ipfs/js-ipfs - Install

[Jassan888]

@Flaveeu can you please give me an example of how to run ipfs http client?
Thank You.

[Flaveeu]

@Jassan888 Please follow the steps below:

1. Install ipfs-http-client using NPM: npm install --save ipfs-http-client
2. Create a file < name >.js
3. Add the following content in the file

const {ipfsClient, globSource, create} = require(‘ipfs-http-client’)

const projectId = ‘YOUR_INFURA_PROJECT_ID’;
const projectSecret = ‘YOUR_INFURA_PROJECT_SECRET’;
async function addFile(){
const auth =
'Basic ’ + Buffer.from(projectId + “:” + projectSecret).toString(‘base64’)

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

  for await (const file of client.addAll(globSource("image0.jpeg", "**/*"))) {
    console.log(file)
  }

}

addFile()

4. Run the file using node: node < filename >.js
5. Check the terminal output.

Please let me know if you have any other questions

[Victor_Blockchain]

this isn’t working for me either. shows it’s pinned in my account
can’t access file on ipfs.io/ipfs
or https://ipfsbrowser.com/

any suggestions?

QmbpkVYBPXp7cMJgRBuxv6QppauQv3zdmF9pMoVCHh3khi

[Flaveeu]

Hi, @Victor_Blockchain could you please reach out to my colleagues via infura.io/contact and we will take it from there?

[datuk2]

ipfs.infura.io is “unsupported domain” when I call this. What is the current ipfsgateway ?

[Flaveeu]

Hi @datuk2 Infura doesn’t support any public gateway anymore.
Please note that you have to use a dedicated gateway, you can find all the relevant details here → https://blog.infura.io/post/introducing-ipfs-dedicated-gateways

[datuk2]

I am trying to understand how to reconfigure my codes. Before this, i used Web3 project with its ProjectID and Key to access and public gateway https://ipfs.infura.io/ipfs/.

Now as I understand I have to create my own dedicated gateway for IPSF and its ProjectId and Key. I am assuming the Web3 Key and ProjectId is not necessary anymore ? Or is this dedicated IPFS in addition to the web3 as well. Ie we need both web3 authority and IPFS authority.

From what I read, we cannot store anything using the IPFS API, the data free up to 5G is for data usage (not storage). Hence how do we upload to IPFS ?

If there is an example showing how we can convert from using web3 and public IPFS gateway to the current situation where there is a dedicated gateway this would be greatly appreciated.

Thanks

[radu]

Hello @datuk2 ,

The public gateway was deprecated for viewing purposes, and now you will have to enable a dedicated gateway in order to view your IPFS content. Basically, the dedicated gateway is like your unique subdomain and it can be enabled very easily from your Infura IPFS project, you just have to choose a name for it and you will be able to access your content using a URL similar to the below from any browser:

https://<your_dedicated_gateway_name>.infura-ipfs.io/ipfs/CID

This is how you would setup your DGW in your IPFS project:

External Image

The Project ID and API Key Secret are not needed when accessing files via your dedicated gateway, but you will need them for all other requests that you make to IPFS like uploading files and/or pinning them as all these requests need to be authenticated.

On Infura IPFS you can store up to a total of 5GB for free and you can download 5GB and upload 5 GB, for free each month, this is on the Core Free plan.
There’s also another plan, the Plus (Usage Based) plan, and you can think of it as a pay-as-you-go option, meaning that you will be billed monthly once you go above the 5GB total storage free quota, and once you go above the free monthly 5GB download and 5GB upload quota.
For each additional GB stored you will be billed $0.08/GB while for each additional GB transferred you will be charged $0.12/GB on a monthly basis. You can think of the Plus plan as a metered version of the Core free plan.

There are several examples of how to upload files to IPFS, using JS, curl or react in our Support Tips category. I will post here just a few:

How to add files using kubo-rpc-client

Hello all You can use the kubo-rpc-client Javascript library to add files from a local machine. In order to do so, please follow the below steps: Install the library from the official kubo-rpc-client repository. Note that if you’ve previously used the ipfs-http-client to upload content to IPFS, it was deprecated and we recommend using the kubo client going forward. Also keep in mind that the kubo client can only be imported as a module, so for simplicity save the below piece of code a…

How to upload multiple files on IPFS under the same CID with cURL

Hey Arif, welcome to the community. Please see the below article: and the code example below: const { globSource, create} = require('ipfs-http-client') const projectId = '27xxxsj'; const projectSecret = '20xxx5b'; async function addFolder(){ const auth = 'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64') const client = create({ host: 'ipfs.infura.io', port: 5001, protocol: 'https', headers: { authorization: auth …

Also below you can find the Infura IPFS docs:

IPFS | INFURA

[datuk2]

Let me put some codes here. Originally I have a file name ipfs.js with the following codes which worked fine up to recently.

const IPFS = require(‘ipfs-api’);

const ipfs = new IPFS({host: ‘ipfs.infura.io’, port: 5001, protocol: ‘https’});

export default ipfs;

then after getting inputs here I modified to

const IPFS = require(‘ipfs-api’);

const projectId =‘AAAAAAAAAAAAAAAAAAA’;
const projectSecret=‘ZZZZZZZZZZZZZZZZZZZZZZZZZZZZ’;

const auth = 'Basic ’ + Buffer.from(projectId + ‘:’ +projectSecret).toString(‘base64’);

const ipfs = new IPFS({host: ‘ipfs.infura.io’, port: 5001, protocol: ‘https’,headers: {authorization: auth}});

export default ipfs;

The error I am getting is in my App.js

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘0’)

Duplex.

http://localhost:3001/static/js/main.chunk.js:298:78

View source

▼ 8 stack frames were expanded.

Duplex.f

node_modules/once/once.js:24

onceWrapper

node_modules/events/events.js:229

Duplex.emit

node_modules/events/events.js:136

(anonymous function)

node_modules/ipfs-api/src/utils/send-files-stream.js:104

f

node_modules/once/once.js:24

push../node_modules/stream-http/lib/request.js.module.exports.<anonymous>

node_modules/ipfs-api/src/utils/send-request.js:194

push../node_modules/stream-http/lib/request.js.module.exports.emit

node_modules/events/events.js:136

(anonymous function)

node_modules/stream-http/lib/request.js:162

▲ 8 stack frames were expanded.

I suspect I still could not connect to the API point. 

Anyone can assist please? Thankyou.

[chris.paterson]

Hi, what does the console log at 296 say?

[datuk2]

Dear Chris, there is no error output there. I have since “ask” GPTchat and it gave some hint that ipfs-api works on the front end (browser) and may not work with server end. In any event, I still think the issue has to do with auth with ipfs.infura.io (as I am getting ‘undefined’ return ie no data).

I have amended my code slightly

const IPFS = require(‘ipfs-api’);
const projectId =‘some’;
const projectSecret=‘ZZZ’;

const auth = 'Basic ’ + Buffer.from(projectId + ‘:’ +projectSecret).toString(‘base64’);

const ipfs = new IPFS ({
host: ‘ipfs.infura.io’,
port: 5001,
protocol: ‘https’,
path: ‘/api/v0/’,
method: ‘POST’,
//auth: projectId + ‘:’ + projectSecret,
headers: {
auth: auth,
}
});

export default ipfs;

External Image

▼ 15 stack frames were expanded.

Duplex.f

node_modules/once/once.js:24

onceWrapper

node_modules/events/events.js:229

Duplex.emit

node_modules/events/events.js:136

(anonymous function)

node_modules/ipfs-api/src/utils/send-files-stream.js:104

f

node_modules/once/once.js:24

(anonymous function)

node_modules/ipfs-api/src/utils/send-request.js:26

(anonymous function)

node_modules/ipfs-api/src/utils/stream-to-json-value.js:29

(anonymous function)

node_modules/ipfs-api/src/utils/stream-to-value.js:13

ConcatStream.

node_modules/concat-stream/index.js:41

ConcatStream.emit

node_modules/events/events.js:142

finishMaybe

node_modules/readable-stream/lib/_stream_writable.js:613

afterWrite

node_modules/readable-stream/lib/_stream_writable.js:470

afterTick

node_modules/process-nextick-args/index.js:48

Item.push…/node_modules/process/browser.js.Item.run

node_modules/process/browser.js:167

drainQueue

node_modules/process/browser.js:131

▲ 15 stack frames were expanded.

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

The codes that gave errors are here -

addIpfs = async () => {
// save document to IPFS,return its hash#, and set hash# to state
// interface-js-ipfs-core/SPEC/FILES.md at master · ipfs-inactive/interface-js-ipfs-core · GitHub
// setState by setting ipfsImageHash to ipfsImageHash[0].hash

    if (this.state.myToken.imageBuffer && this.state.myToken.imageBuffer.length > 0) {

        await ipfs.add(this.state.myToken.imageBuffer, (err, ipfsHash) => {
            console.log('IPFS hash: ' + ipfsHash + ', error: ' + err);

            let myMetadata = JSON.parse(JSON.stringify(this.state.myToken.metadataBuffer));
            myMetadata.image = this.state.web3ctx.ipfsGateway + ipfsHash[0].hash;
              
            this.setState({
                myToken: {
                    ...this.state.myToken,
                    ipfsImageHash: ipfsHash[0].hash,
                    //ipfsImageHash: ipfsHash,
                    ipfsImageUrl: myMetadata.image,
                    metadataBuffer: myMetadata,
                    imageBuffer: ''
                },
                selectedTab: 'Metadata'
            });
        })
    } else if (this.state.myToken.metadataBuffer && this.state.myToken.metadataBuffer.toString().length > 0) {

        await ipfs.add(Buffer.from(JSON.stringify(this.state.myToken.metadataBuffer)), (err, ipfsHash) => {
            console.log('IPFS hash: ' + ipfsHash + ', error: ' + err);

            this.setState({
                myToken: {
                    ...this.state.myToken,
                    ipfsMetadataHash: ipfsHash[0].hash,
                    ipfsMetadataUrl: this.state.web3ctx.ipfsGateway + ipfsHash[0].hash
                },
                selectedTab: 'Metadata'
            });
        })
    } else {
        console.log('file could not be found: '
            + JSON.stringify(this.state.myToken.metadataBuffer, null, 2));
        return 1;
    }
};

Please assist. Anyone who has worked with ipfs-api and got this part to work, please enlighten me. Thanks & Merry Xmas Happy New Year.

[chris.paterson]

Hi @datuk2,

I’m not sure what ChatGPT is talking about.

NOTE, that if you are using https://www.npmjs.com/package/ipfs-api then it has a deprecation notice on it. You should use instead ipfs-http-client.

We have an example using ipfs-http-client here that will help you get the syntax correct. I think the key problem with your code above is to do with adding the authorization header - “auth: auth” won’t work.

I suggest you start with the example and get it working, and then translate from there.

Hope this helps.

Warm regards,
Chris | Infura | ConsenSys

[datuk2]

Actually, I have tried with headers: ```

headers: {
authorization: 'Bearer ’ + TOKEN
}

as per the example under https://www.npmjs.com/package/ipfs-api

Sorry it should be ChatGPT the AI chat robot by openai. 

Yes even though it is deprecate the codes should still work ? I do not want to redo and recheck the entire project at this stage, just want to have it working for demo. 

I wanted to ask WHY is there a ":" between the projectID + ProjectSercret ? Is this the correct way to present the "TOKEN" to dedicated gateway ?

[datuk2]

A bit more digging and the issue is better explained here?

IPFS Authentication Error 403 - Forbidden

Hello, In the middle of August I got the 401 forbiden error. I managed to correct it. However, now I have this error again. (403 forbidden) Do you have any idea how to solve the error? Request URL: https://sagemarket.infura-ipfs.io/ipfs/xxxxxxxxxxxxxxxxxxxxxxxx Request mode: GET Status code: 403 Forbidden Remote address: 54.227.105.66:443 Provenance URL rules: strict-origin-when-cross-origin

So far there is still no “solution” other then messing with the security configuration in infura IPFS project, note this peculiar problem is with chrome