add upload to IPFS handler
This commit is contained in:
parent
d84df74c53
commit
fc3615ab13
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue