diff --git a/app/components/AddFunder.jsx b/app/components/AddFunder.jsx index abff6bd..9e37142 100644 --- a/app/components/AddFunder.jsx +++ b/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 }) => ( { 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' }} /> ( onBlur={handleBlur} value={values.funderDescription || ''} /> + {status && status.profileImg && ipfs} ( - {status && { +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) + }) + }) +} diff --git a/package.json b/package.json index 89c20d6..01a4739 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 4f57ec9..6d7ec68 100644 --- a/yarn.lock +++ b/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: