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 {
constructor(props)
{
super(props);
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...
//console.log(file);
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
{
console.log(error);
return
}
}); //<^add the file to ipfs, and then run the callback, which checks for errors and responds accordingly
}
render() {
return (
<div>
<nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a
className="navbar-brand col-sm-3 col-md-2 mr-0"
href="http://www.dappuniversity.com/bootcamp"
target="_blank"
rel="noopener noreferrer"
>
Dapp University
</a>
</nav>
<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">
<a
href="http://www.dappuniversity.com/bootcamp"
target="_blank"
rel="noopener noreferrer"
>
<img src={logo} className='App-logo' alt='logo' />
</a>
<p> </p>
<h2>Change Meme</h2>
<form onSubmit={this.onSubmit} >
<input type='file' onChange={this.captureFile} />
<input type='submit' />
</form>
</div>
</main>
</div>
</div>
</div>
);
}
}
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
And
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.
