Slate image upload integration (work in progress) #185

app/redux/UserSaga.js

@@ -20,6 +20,7 @@ export const userWatches = [
     loginErrorWatch,
     lookupPreviousOwnerAuthorityWatch,
     watchLoadSavingsWithdraw,
+    uploadImageWatch,
 ]
 
 const highSecurityPages = Array(/\/market/, /\/@.+\/(transfers|permissions|password)/, /\/~witnesses/)
@@ -348,6 +349,68 @@ function* lookupPreviousOwnerAuthority({payload: {}}) {
     yield put(user.actions.setUser({previous_owner_authority}))
 }
 
+import {Signature, hash} from 'shared/ecc'
+
+function* uploadImageWatch() {
+    yield* takeLatest('user/UPLOAD_IMAGE', uploadImage);
+}
+
+function* uploadImage({payload: {file, progress}}) {
+    progress = msg => {
+        console.log('Upload image progress', msg)
+        progress(msg)
+    }
+
+    if(!file) {
+        console.error('uploadImage required: file')
+        return
+    }
+
+    const reader = new FileReader()
+    const data = yield new Promise(resolve => {
+        reader.addEventListener('load', () => {
+            const result = new Buffer(reader.result, 'binary')
+            resolve(result)
+        })
+        reader.readAsBinaryString(file)
+    })
+    const bufSha = hash.sha256(data)
+
+    const stateUser = yield select(state => state.user)
+    const username = stateUser.getIn(['current', 'username'])
+    const d = stateUser.getIn(['current', 'private_keys', 'posting_private'])
+    if(!username) {
+        progress({error: 'Not logged in'})
+        return
+    }
+    if(!d) {
+        progress({error: 'Login with your posting key'})
+        return
+    }
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const sig = Signature.signBufferSha256(bufSha, d)
+    const postUrl = `http://localhost:3234/${username}/${sig.toHex()}`
+
+    fetch(postUrl, {
+        method: 'post',
+        body: formData
+    })
+    .then(r => r.json())
+    .then(res => {
+        const {error} = res
+        if(error) {
+            progress({error: 'Error: ' + error})
+            return
+        }
+        const {files: [url]} = res
+        progress({url: `${url}/${file.name}`})
+    })
+}
+
+
 // function* getCurrentAccount() {
 //     const current = yield select(state => state.user.get('current'))
 //     if (!current) return

app/utils/SlateEditor/Image.js

 import React from 'react'
+import {connect} from 'react-redux'
 
-export default class Image extends React.Component {
+export default connect(
+    (state, ownProps) => ownProps,
+    dispatch => ({
+        uploadImage: (file, progress) => {
+            dispatch({
+                type: 'user/UPLOAD_IMAGE',
+                payload: {file, progress},
+            })
+        },
+    })
+)(
+
+class Image extends React.Component {
     state = {};
 
     componentDidMount() {
@@ -15,7 +28,7 @@ export default class Image extends React.Component {
         console.log("** image being loaded.. ----->", file)
         const reader = new FileReader()
         reader.addEventListener('load', () => {
-            //this.setState({ src: reader.result })
+            // this.setState({ src: reader.result })
             const {editor, node} = this.props
             const state = editor.getState();
             const next = state
@@ -27,22 +40,27 @@ export default class Image extends React.Component {
               })
               .apply()
             editor.onChange(next)
+
+            const {uploadImage} = this.props
+            uploadImage(file, progress => {
+                this.setState({ progress })
+            })
         })
         reader.readAsDataURL(file)
     }
 
     render() {
         const { node, state, attributes } = this.props
-        let { src } = this.state
+        let { src, progress } = this.state
 
         const isFocused = state.selection.hasEdgeIn(node)
         const className = isFocused ? 'active' : null
 
         if(src) {
-            console.log("** uploaded image being rendered..", src, state)
+            console.log("** uploaded image being rendered..", (src ? src.substring(0, 30) : '') + '...', state)
         } else {
             const src2 = node.data.get('src')
-            console.log("** image source was not in state. data.src = ", src2)
+            console.log("** image source was not in state. data.src = ", (src2 ? src2.substring(0, 30) : '') + '...')
             src = src2;
         }
 
@@ -50,9 +68,10 @@ export default class Image extends React.Component {
             // src = 'https://img1.steemit.com/0x0/http://ariasprado.name/wp-content/uploads/2012/09/missing-tile-256x256.png'
             // src = $STM_Config.img_proxy_prefix + '0x0/' + src
         }
-
-        return src
-          ? <img {...attributes} src={src} className={className} />
+        return src ? <span>
+            <img {...attributes} src={src} className={className} />
+            {progress}
+          </span>
           : <span>Loading... ({src})</span>
     }
-}
+})
\ No newline at end of file