I am currently trying to learn to use ipfs in conjunction with ethereum to create web applications. To help gain an understanding of how ipfs works, I am creating a simple React application that loads images to and from ipfs using a public gateway. The primary javascript file for the application is here:

import React, { Component } from 'react';
import logo from '../logo.png';
import './App.css';

const ipfsClient = require('ipfs-http-client');
const ipfs = ipfsClient({ host: 'ipfs.eternum.io', port: 5001, protocol: 'https' }); //create an ipfs client by connecting to the infura node

class App extends Component {

 this.state = 
   buffer: null

captureFile = (event) => //called when a file is submitted to the "choose file" box
 event.preventDefault();   //prevent the page from reloading on submit
 const file = event.target.files[0]  //get the first file submitted...
 const reader = new window.FileReader();  //create a new file reader for the file, to convert the file to a buffer
 reader.readAsArrayBuffer(file);   //read the file as an array buffer for ipfs
 reader.onloadend = () => {  ////once the reader is done reading the file...
   this.setState({ buffer: Buffer(reader.result) })  //set the buffer value in the state object to the array buffer
   console.log('buffer', this.state.buffer)

onSubmit = (event) => 
 event.preventDefault(); //prevent the page from reloading on submit
 console.log("Submitting file to ipfs...")
 ipfs.add(this.state.buffer, (error, result) => { //error and result are callback function args
   console.log('Ipfs result: ', result);
   if (error)  //if there was an error, log it and return
 }); //<^add the file to ipfs, and then run the callback, which checks for errors and responds accordingly

render() {
 return (
     <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
         className="navbar-brand col-sm-3 col-md-2 mr-0"
         rel="noopener noreferrer"
         Dapp University
     <div className="container-fluid mt-5">
       <div className="row">
         <main role="main" className="col-lg-12 d-flex text-center">
           <div className="content mr-auto ml-auto">
               rel="noopener noreferrer"
               <img src={logo} className='App-logo' alt='logo' />
             <h2>Change Meme</h2>
             <form onSubmit={this.onSubmit} >
               <input type='file' onChange={this.captureFile} />
               <input type='submit' />

export default App;

I have installed ipfs-http-client at version ^33.1.1. When I attempt to use the module to upload the file to ipfs, I get the following error:

request.js:84          POST https://ipfs.eternum.io:5001/api/v0/add?stream-channels=true net::ERR_CONNECTION_TIMED_OUT


TypeError: Failed to fetch
    at push../node_modules/iso-stream-http/lib/request.js.ClientRequest._onFinish (request.js:84:1)
    at push../node_modules/iso-stream-http/lib/request.js.module.exports.<anonymous> (request.js:25:1)
    at push../node_modules/iso-stream-http/lib/request.js.module.exports.emit (events.js:150:1)
    at finishMaybe (_stream_writable.js:624:1)
    at afterWrite (_stream_writable.js:470:1)
    at push../node_modules/process/browser.js.Item.run (browser.js:167:1)
    at drainQueue (browser.js:131:1)

Does anyone have any idea how I can fix this issue? I can provide more information if needed.

2 Answers 2


Turns out I needed to set up a dedicated gateway using infura, since my files were not being propagated across other nodes (since I am not paying anything for that). As a result, I could not access the files through public gateways. But setting up a dedicated gateway for free with infura suits my needs for now. Now, I use the url of my dedicated gateway and my program runs without issue.


All public gateways I have tried so far are not working, so I also had to set up a dedicated infura ipfs project, I went ahead to create a sub-domain. Note that you have to use your project id and project secret for authorization while setting up your ipfshttpclient.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.