Upload files working

src/files/FilesPage.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'redux-bundler-react'
-import Button from '../components/button/Button'
 import Breadcrumbs from './breadcrumbs/Breadcrumbs'
 import FilesList from './files-list/FilesList'
 import FilePreview from './file-preview/FilePreview'
+import FileInput from './file-input/FileInput'
 
 const action = (name) => {
   return (...args) => {
@@ -42,6 +42,10 @@ class FilesPage extends React.Component {
     }
   }
 
+  onFilesUpload = (files) => {
+    this.props.doFilesWrite(this.props.files.path, files)
+  }
+
   render () {
     const {files} = this.props
 
@@ -76,7 +80,7 @@ class FilesPage extends React.Component {
       <div>
         <div className='flex items-center justify-between mb4'>
           <Breadcrumbs path={files.path} onClick={this.onLinkClick} />
-          <Button className='f7'>+ Add to IPFS</Button>
+          <FileInput upload={this.onFilesUpload} />
         </div>
         {body}
         <h1 data-id='title'>Files</h1>
@@ -89,6 +93,7 @@ export default connect(
   'doUpdateHash',
   'doFilesDelete',
   'doFilesRename',
+  'doFilesWrite',
   'selectFiles',
   'selectGatewayUrl',
   FilesPage

src/files/file-input/FileInput.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../components/button/Button'
+
+export function readAsBuffer (file) {
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader()
+    reader.onload = (event) => {
+      resolve({
+        content: Buffer.from(reader.result),
+        name: file.name
+      })
+    }
+    reader.onerror = (event) => {
+      reject(reader.error)
+    }
+
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+export default class FileInput extends React.Component {
+  static propTypes = {
+    upload: PropTypes.func.isRequired
+  }
+
+  onChange = () => {
+    const raw = this.input.files
+    const { upload } = this.props
+    let promises = []
+
+    for (const file of raw) {
+      promises.push(readAsBuffer(file))
+      console.log(file)
+    }
+
+    Promise.all(promises)
+      .then(files => {
+        upload(files)
+      })
+
+    this.input.value = null
+  }
+
+  onClick = () => {
+    this.input.click()
+  }
+
+  render () {
+    return (
+      <div>
+        <Button className='f7' onClick={this.onClick}>+ Add to IPFS</Button>
+        <input
+          type='file'
+          className='dn'
+          multiple
+          ref={(input) => { this.input = input }}
+          onChange={this.onChange} />
+      </div>
+    )
+  }
+}