display image for profile

app/components/AddFunder.jsx

@@ -9,7 +9,7 @@ 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'
+import { captureFile, isIpfs } from '../utils/ipfs'
 
 const { addGiver, addDelegate, addProject } = LiquidPledging.methods
 const FUNDER = 'FUNDER'
@@ -136,7 +136,13 @@ const AddFunder = ({ appendFundProfile }) => (
         <input
           ref={(input) => { uploadInput = input }}
           type="file"
-          onChange={(e) => captureFile(e, hash => setFieldValue('funderDescription', hash))}
+          onChange={
+          (e) => captureFile(
+            e,
+            hash => setFieldValue('funderDescription', hash),
+            profileImg => setStatus({ profileImg })
+          )
+          }
           style={{ display: 'none' }} />
         <TextField
           id="funderDescription"
@@ -156,6 +162,7 @@ const AddFunder = ({ appendFundProfile }) => (
           onBlur={handleBlur}
           value={values.funderDescription || ''}
         />
+        {status && status.profileImg && <img src={status.profileImg} alt='ipfs' style={{maxWidth: '90%'}} />}
         <TextField
           id="commitTime"
           name="commitTime"
@@ -171,7 +178,7 @@ const AddFunder = ({ appendFundProfile }) => (
         <Button variant="contained" color="primary" type="submit">
           {`ADD ${buttonLabel[values.adminType]} PROFILE`}
         </Button>
-        {status && <Snackbar
+        {status && status.snackbar && <Snackbar
                      anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'left',

app/utils/ipfs.js

@@ -1,17 +1,20 @@
 import IPFS from 'ipfs'
 import fileReaderPullStream from 'pull-file-reader'
+import { Matcher } from '@areknawo/rex'
 
+const ipfsMatcher = new Matcher().begin().find('/ipfs/')
 const ipfs = new IPFS()
 
-export const captureFile = (event, cb) => {
+export const isIpfs = str => ipfsMatcher.test(str)
+export const captureFile = (event, cb, imgCb) => {
   event.stopPropagation()
   event.preventDefault()
   const file = event.target.files[0]
-  saveToIpfs(file, cb)
+  saveToIpfs(file, cb, imgCb)
 }
 
 
-const saveToIpfs = (file, cb) => {
+const saveToIpfs = (file, cb, imgCb) => {
   let ipfsId
   const fileStream = fileReaderPullStream(file)
   ipfs.add(fileStream, { progress: (prog) => console.log(`received: ${prog}`) })
@@ -20,7 +23,26 @@ const saveToIpfs = (file, cb) => {
       ipfsId = response[0].hash
       console.log(ipfsId)
       cb(`ipfs/${ipfsId}`)
+      getImageFromIpfs(ipfsId, imgCb)
     }).catch((err) => {
       console.error(err)
     })
 }
+
+export const getImageFromIpfs = async (hash, cb) => {
+  const files = await getFile(hash);
+  const { content } = files[0];
+  const arrayBufferView = new Uint8Array(content);
+  const blob = new Blob([ arrayBufferView ], { type: "image/jpeg" });
+  const img = URL.createObjectURL(blob);
+  cb(img)
+};
+
+export const getFile = CID => {
+  return new Promise(function(resolve, reject) {
+    ipfs.get(CID, function (err, files) {
+      if (err) reject(err)
+      else resolve(files)
+    })
+  })
+}

package.json

@@ -55,6 +55,7 @@
   "homepage": "https://github.com/Giveth/liquidpledging#readme",
   "dependencies": {
     "@aragon/os": "3.1.9",
+    "@areknawo/rex": "^2.0.0",
     "@material-ui/core": "^3.6.0",
     "@material-ui/icons": "^3.0.1",
     "@nozbe/watermelondb": "^0.9.0",

yarn.lock

@@ -10,6 +10,11 @@
     truffle-hdwallet-provider "0.0.3"
     truffle-privatekey-provider "0.0.6"
 
+"@areknawo/rex@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@areknawo/rex/-/rex-2.0.0.tgz#3b61f7d3eb6057af81f56d48233c0062dd12ace0"
+  integrity sha512-iazmkgfyEVtHJIVUThcBk+aRhAzuB/Nf/5RYHS9s/31udEdGjkntgqMxwqy4KchNPyckMaOP5wW0+Lc1+L/a6A==
+
 "@babel/code-frame@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
@@ -8749,7 +8754,7 @@ pull-write@^1.1.4:
     pull-cat "^1.1.11"
     pull-stream "^3.4.5"
 
-"pull-ws@github:hugomrdias/pull-ws#fix/bundle-size":
+pull-ws@hugomrdias/pull-ws#fix/bundle-size:
   version "3.3.1"
   resolved "https://codeload.github.com/hugomrdias/pull-ws/tar.gz/8e2ce0bb3b1cd6804828316e937fff8e0bef6225"
   dependencies: