I am trying to send files to ipfs. I am using the ipfs-http-client module. when I am trying to compile with this I keep getting this error :
Module not found: Can't resolve 'ipfs-http-client' in '/home/ubuntu/chatapp/src/components'
I installed the module using the command specified in the official docs - "npm install --save ipfs-http-client" . I can see the module in my dependencies but still getting this error. version shows in the dependency is 60.0.0 I am a completely new to this and doing this according to a youtube video. A little help would be much appreciated. Thanks in advance.
this is the code I am using
import React, { Component } from 'react';
import logo from '../logo.png';
import './App.css';
const ipfsClient = require('ipfs-http-client')
const ipfs = ipfsClient({host: 'ipfs.infura.io', port:'5001', protocol: 'https'})
class App extends Component {
constructor(props) {
super(props);
this.state = {
buffer: null
};
}
captureFile = (event) => {
event.preventDefault()
//processs file for IPFS
const file = event.target.files[0]
const reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = () => {
this.setState({buffer: Buffer(reader.result)})
}
}
onSubmit = async(event) => {
event.preventDefault()
console.log("submitting the form...")
await ipfs.add(this.state.buffer,(error,result) => {
console.log('ipfs result', result)
if(error) {
console.error(error)
return
}
//do stuff here
})
}
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"
>
File Sharing Application
</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</h2>
<form onSubmit={this.onSubmit} >
<input type='file' onChange={this.captureFile} />
<input type='submit' value='submit' />
</form>
</div>
</main>
</div>
</div>
</div>
);
}
}
export default App;
