add upload to IPFS handler

This commit is contained in:
Barry Gitarts 2019-04-03 14:57:50 -04:00 committed by Barry G
parent d84df74c53
commit fc3615ab13
2 changed files with 39 additions and 8 deletions

View File

@ -1,4 +1,4 @@
import React, { createRef } from 'react'
import React, { createRef, useState } from 'react'
import { Formik } from 'formik'
import TextField from '@material-ui/core/TextField'
import Divider from '@material-ui/core/Divider'
@ -8,6 +8,7 @@ import Button from '@material-ui/core/Button'
import InputAdornment from '@material-ui/core/InputAdornment'
import CloudUpload from '@material-ui/icons/CloudUpload'
import { withStyles } from '@material-ui/core/styles'
import { captureFile, formatForIpfs, uploadToIpfs } from '../../utils/ipfs'
const styles = theme => ({
root: {
@ -56,6 +57,7 @@ const styles = theme => ({
}
})
const isWeb = str => str.includes('http')
const createJSON = values => {
const {
title,
@ -83,7 +85,7 @@ const createJSON = values => {
type: 'video'
}
}
return JSON.stringify(manifest)
return JSON.stringify(manifest, null, 2)
}
const Title = ({ className }) => (
@ -95,6 +97,7 @@ const Title = ({ className }) => (
let uploadInput = createRef()
const SubmissionSection = ({ classes }) => {
const [uploads, setUploads] = useState({})
return (
<Formik
initialValues={{
@ -110,7 +113,16 @@ const SubmissionSection = ({ classes }) => {
}}
onSubmit={async (values, { resetForm }) => {
const manifest = createJSON(values)
console.log({manifest})
let fileLists = []
Object.keys(uploads).forEach(k => {
fileLists = [ ...fileLists, formatForIpfs(uploads[k][0]) ]
})
fileLists.push({
path: '/root/manifest.json', content: Buffer.from(manifest)
})
const contentHash = await uploadToIpfs(fileLists)
//saveToIpfs(fileLists, console.log, console.log)
console.log({manifest, values, uploads, fileLists, contentHash})
}}
>
@ -136,11 +148,12 @@ const SubmissionSection = ({ classes }) => {
const file = e.target.files
const { activeField } = status
setFieldValue(activeField, file[0]['name'])
setUploads({ ...uploads, [activeField]: file })
setStatus({
...status,
fields: { ...status.fields, [activeField]: file }
activeField: null
})
console.log({file, activeField, status})
console.log({file, activeField, status}, e.target)
}
}
style={{ display: 'none' }}
@ -263,6 +276,19 @@ const SubmissionSection = ({ classes }) => {
<TextField
className={classes.textField}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<CloudUpload
style={{ cursor: 'pointer' }}
onClick={() => {
const activeField = 'video'
setStatus({ ...status, activeField })
uploadInput.click()
}
}
/>
</InputAdornment>
),
classes: {
input: classes.textInput
}

View File

@ -21,7 +21,7 @@ export const captureFile = (event, cb, imgCb) => {
saveToIpfs(formattedFiles, cb, imgCb)
}
const formatFileList = files => {
export const formatFileList = files => {
const formattedList = []
for (let i=0; i<files.length; i++) {
formattedList.push(formatForIpfs(files[i]))
@ -29,7 +29,7 @@ const formatFileList = files => {
return formattedList
}
const formatForIpfs = file => {
export const formatForIpfs = file => {
const { name, type } = file
const content = fileReaderPullStream(file)
return {
@ -37,7 +37,7 @@ const formatForIpfs = file => {
content
}
}
const saveToIpfs = (files, cb, imgCb) => {
export const saveToIpfs = (files, cb, imgCb) => {
let ipfsId
ipfs.add(files, { progress: (prog) => console.log(`received: ${prog}`) })
.then((response) => {
@ -50,6 +50,11 @@ const saveToIpfs = (files, cb, imgCb) => {
})
}
export const uploadToIpfs = async files => {
const res = await ipfs.add(files, { progress: (prog) => console.log(`received: ${prog}`) })
return `ipfs/${res[0].hash}`
}
export const getImageFromIpfs = async (hash, cb) => {
const res = await getFromIpfs(hash)
cb(res)