Ethereum Programming 16 upload image to ipfs

The InterPlanetary File System (IPFS) is a protocol and peer-to-peer network for storing and sharing data in a distributed file system. IPFS uses content-addressing to uniquely identify each file in a global namespace connecting all computing devices.[4]

IPFS allows users to host and receive content in a manner similar to BitTorrent. As opposed to a centrally located server, IPFS is built around a decentralized system[5] of user-operators who hold a portion of the overall data, creating a resilient system of file storage and sharing. Any user in the network can serve a file by its content address, and other peers in the network can find and request that content from any node who has it using a distributed hash table (DHT).

https://ipfs.infura.io/ipfs/QmUs6sUgXDDnhgeQMkWNGWoqrbHqcGF7PG4EWekWzjNXbH

https://ipfs.infura.io/ipfs/hash

//logs

//src/components/app.js

import React, { Component } from 'react';

import Web3 from 'web3';

import Identicon from 'identicon.js';

import './App.css';

import Decentragram from '../abis/Decentragram.json'

import Navbar from './Navbar'

import Main from './Main'

const ipfsClient = require('ipfs-http-client')

const ipfs = ipfsClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' }) // leaving out the arguments will default to these values

class App extends Component {

  async componentWillMount() {

    await this.loadWeb3()

    await this.loadBlockchainData()

  }

  async loadWeb3() {

    if (window.ethereum) {

      window.web3 = new Web3(window.ethereum)

      await window.ethereum.enable()

    }

    else if (window.web3) {

      window.web3 = new Web3(window.web3.currentProvider)

    }

    else {

      window.alert('Non-Ethereum browser detected. You should consider trying MetaMask!')

    }

  }

  async loadBlockchainData() {

    const web3 = window.web3

    // Load account

    const accounts = await web3.eth.getAccounts()

    this.setState({ account: accounts[0] })

    // Network ID

    const networkId = await web3.eth.net.getId()

    console.log('network ID', networkId)

    const networkData = Decentragram.networks[networkId]

    console.log('network data', networkData)

    if (networkData) {

      const decentragram = new web3.eth.Contract(Decentragram.abi, networkData.address)

      this.setState({ decentragram })

      console.log('contract', decentragram)

      const imagesCount = await decentragram.methods.imageCount().call()

      this.setState({ imagesCount })

      this.setState({ loading: false })

    } else {

      window.alert('Decentragram contract not deployed to detected network.')

    }

  }

  captureFile = event => {

    event.preventDefault()

    const file = event.target.files[0]

    const reader = new window.FileReader()

    reader.readAsArrayBuffer(file)

    reader.onloadend = () => {

      this.setState({ buffer: Buffer(reader.result) })

      console.log('buffer', this.state.buffer)

    }

  }

  uploadImage = description => {

    console.log("Submitting file to ipfs...")

    //adding file to the IPFS

    ipfs.add(this.state.buffer, (error, result) => {

      console.log('Ipfs result', result)

      if (error) {

        console.error(error)

        return

      }

      // this.setState({ loading: true })

      // this.state.decentragram.methods.uploadImage(result[0].hash, description).send({ from: this.state.account }).on('transactionHash', (hash) => {

      //   this.setState({ loading: false })

      // })

    })

  }

  constructor(props) {

    super(props)

    this.state = {

      account: '',

      decentragram: null,

      images: [],

      loading: true

    }

  }

  render() {

    return (

      <div>

        <Navbar account={this.state.account} />

        {this.state.loading

          ? <div id="loader" className="text-center mt-5"><p>Loading...</p></div>

          : <Main

            captureFile={this.captureFile}

            uploadImage={this.uploadImage}

          />

        }

      </div>

    );

  }

}

export default App;

---------------------------

//src/componnets/main.js

import React, { Component } from 'react';

import Identicon from 'identicon.js';

class Main extends Component {

  render() {

    return (

      <div className="container-fluid mt-5">

        <div className="row">

          <main role="main" className="col-lg-12 ml-auto mr-auto" style={{ maxWidth: '500px' }}>

            <div className="content mr-auto ml-auto">

              <p>&nbsp;</p>

              <h2>Share Image</h2>

              <form onSubmit={(event) => {

                event.preventDefault()

                const description = this.imageDescription.value

                this.props.uploadImage(description)

              }} >

                <input type='file' accept=".jpg, .jpeg, .png, .bmp, .gif" onChange={this.props.captureFile} />

                <div className="form-group mr-sm-2">

                  <br></br>

                  <input

                    id="imageDescription"

                    type="text"

                    ref={(input) => { this.imageDescription = input }}

                    className="form-control"

                    placeholder="Image description..."

                    required />

                </div>

                <button type="submit" className="btn btn-primary btn-block btn-lg">Upload!</button>

              </form>

              <p>&nbsp;</p>

              {/* Code ... */}

            </div>

          </main>

        </div>

      </div>

    );

  }

}

export default Main;

reference:

https://www.youtube.com/watch?v=XLahq4qyors