qr.js

import React, { Component } from 'react'
import Helmet from 'react-helmet'
import QrCode from 'qrcode.react'

import { uploadImage, addJson, getJson, getIpfsHashFromBytes32, getBytes32FromIpfsHash } from '../utils/ipfs'
import './ipfs.css'

export default class Ipfs extends Component {
  constructor(props) {
    super(props)
    this.state = {
      file: '',
      imagePreviewUrl: '',
      qrText: '{ "contractAddress": "0x85d79b7ea81595a5a720d792f184093e00eaf577", "invoiceId": 6 }'
    }
    this.qrTextInput = React.createRef()
    this.jsonInput = React.createRef()
  }

  componentDidMount() {
    this.qrTextInput.current.value = this.state.qrText
  }

  async _handleSubmit(e) {
    e.preventDefault()
    const hash = await uploadImage(this.state.file)
    console.log('bytes32', hash)
    console.log(`https://ipfs.io/ipfs/${getIpfsHashFromBytes32(hash)}`)
  }

  _handleImageChange(e) {
    e.preventDefault()

    let reader = new FileReader()
    let file = e.target.files[0]

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      })
    }

    reader.readAsDataURL(file)
  }

  async _addJson(e) {
    e.preventDefault()
    const obj = JSON.parse(this.jsonInput.current.value)
    const hash = await addJson(obj)
    console.log('bytes32', hash)
    console.log(`https://ipfs.io/ipfs/${getIpfsHashFromBytes32(hash)}`)
  }

  async _getJson(e) {
    e.preventDefault()
    const userInput = this.jsonInput.current.value
    const ipfsHash = userInput.startsWith('0x') ? userInput : getBytes32FromIpfsHash(userInput)
    console.log(userInput, '->', JSON.stringify(await getJson(ipfsHash)))
  }

  async _generateQr(e) {
    e.preventDefault()
    this.setState({ qrText: this.qrTextInput.current.value })
  }

  render() {
    let { imagePreviewUrl } = this.state
    let imagePreview = null
    if (imagePreviewUrl) {
      imagePreview = <img alt="uploaded" src={imagePreviewUrl} />
    } else {
      imagePreview = <div className="previewText">Please select an Image for Preview</div>
    }

    return (
      <div className="previewComponent">
        <Helmet>
          <title>IPFS Tools</title>
        </Helmet>
        <form onSubmit={e => this._handleSubmit(e)}>
          <input className="fileInput" type="file" onChange={e => this._handleImageChange(e)} />
          <button className="submitButton" type="submit" onClick={e => this._handleSubmit(e)}>
            Upload Image
          </button>
        </form>
        <div className="imgPreview">{imagePreview}</div>
        <h3>JSON</h3>
        <textarea ref={this.jsonInput} name="jsonInput" cols="30" rows="4" /> <br />
        <p>
          <button onClick={this._addJson.bind(this)}>Add JSON</button>
          <button onClick={this._getJson.bind(this)}>Read JSON</button>
        </p>
        <h3>QR Code</h3>
        <textarea ref={this.qrTextInput} name="qrText" cols="30" rows="4" /> <br />
        <button onClick={this._generateQr.bind(this)}>Generate QR code</button> <br />
        <div className="qr">{this.state.qrText && <QrCode size={200} value={this.state.qrText} />}</div>
      </div>
    )
  }
}