Skip to content

Instantly share code, notes, and snippets.

@gornostal

gornostal/qr.js

Created Dec 8, 2018
Embed
What would you like to do?
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>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.