add ipfs upload to create profile

app/components/AddFunder.jsx

@@ -1,12 +1,15 @@
-import React from 'react'
+import React, { createRef } from 'react'
 import { Formik } from 'formik'
 import LiquidPledging from 'Embark/contracts/LiquidPledging'
 import Button from '@material-ui/core/Button'
 import MenuItem from '@material-ui/core/MenuItem'
 import TextField from '@material-ui/core/TextField'
 import Snackbar from '@material-ui/core/Snackbar'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import CloudUpload from '@material-ui/icons/CloudUpload'
 import web3 from 'Embark/web3'
 import { MySnackbarContentWrapper } from './base/SnackBars'
+import { captureFile } from '../utils/ipfs'
 
 const { addGiver, addDelegate, addProject } = LiquidPledging.methods
 const FUNDER = 'FUNDER'
@@ -52,6 +55,7 @@ const successMsg = {
   [PROJECT]: addProjectSucessMsg
 }
 
+let uploadInput = createRef()
 const AddFunder = ({ appendFundProfile }) => (
   <Formik
     initialValues={{ adminType: FUNDER, funderName: '', funderDescription: '', commitTime : '' }}
@@ -89,15 +93,15 @@ const AddFunder = ({ appendFundProfile }) => (
     }}
   >
     {({
-       values,
-       errors,
-       touched,
-       handleChange,
-       handleBlur,
-       handleSubmit,
-       setFieldValue,
-       setStatus,
-       status
+      values,
+      errors,
+      touched,
+      handleChange,
+      handleBlur,
+      handleSubmit,
+      setFieldValue,
+      setStatus,
+      status
     }) => (
       <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
         <TextField
@@ -129,10 +133,22 @@ const AddFunder = ({ appendFundProfile }) => (
           onBlur={handleBlur}
           value={values.funderName || ''}
         />
+        <input
+          ref={(input) => { uploadInput = input }}
+          type="file"
+          onChange={(e) => captureFile(e, hash => setFieldValue('funderDescription', hash))}
+          style={{ display: 'none' }} />
         <TextField
           id="funderDescription"
           name="funderDescription"
-          label="Description (URL or IPFS Hash)"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <CloudUpload style={{ cursor: 'pointer' }} onClick={() => uploadInput.click()} />
+              </InputAdornment>
+            ),
+          }}
+          label={<span>Description (URL or IPFS Hash)</span>}
           placeholder="Description (URL or IPFS Hash)"
           margin="normal"
           variant="outlined"

app/utils/ipfs.js

@@ -0,0 +1,26 @@
+import IPFS from 'ipfs'
+import fileReaderPullStream from 'pull-file-reader'
+
+const ipfs = new IPFS()
+
+export const captureFile = (event, cb) => {
+  event.stopPropagation()
+  event.preventDefault()
+  const file = event.target.files[0]
+  saveToIpfs(file, cb)
+}
+
+
+const saveToIpfs = (file, cb) => {
+  let ipfsId
+  const fileStream = fileReaderPullStream(file)
+  ipfs.add(fileStream, { progress: (prog) => console.log(`received: ${prog}`) })
+    .then((response) => {
+      console.log(response)
+      ipfsId = response[0].hash
+      console.log(ipfsId)
+      cb(`ipfs/${ipfsId}`)
+    }).catch((err) => {
+      console.error(err)
+    })
+}

config/blockchain.js

@@ -107,9 +107,12 @@ module.exports = {
   rinkeby: {
     networkType: "rinkeby",
     syncMode: "light",
-    account: {
-      password: "config/testnet/password"
-    }
+    accounts: [
+      {
+        nodeAccounts: true,
+        password: "config/testnet/password"
+      }
+    ]
   },
 
   // merges with the settings in default

package.json

@@ -69,8 +69,10 @@
     "eslint": "^5.9.0",
     "eth-contract-class": "^0.0.12",
     "formik": "^1.3.2",
+    "ipfs": "^0.34.4",
     "lokijs": "^1.5.6",
     "material-table": "^1.12.0",
+    "pull-file-reader": "^1.0.2",
     "ramda": "^0.26.1",
     "react": "^16.7.0",
     "react-chartjs-2": "^2.7.4",