upload files!!

4 files changed, 40 insertions, 8 deletions

diff --git a/app/client/api/crud.upload.js b/app/client/api/crud.upload.js
index f680a74..97b6769 100644
--- a/app/client/api/crud.upload.js
+++ b/app/client/api/crud.upload.js
@@ -1,12 +1,20 @@
 import { as_type } from './crud.types'
 
-export function crud_upload(type, id, fd, dispatch) {
+export function crud_upload(type, fd, data, dispatch) {
   return new Promise( (resolve, reject) => {
+    const id = data.id
+
+    Object.keys(data).forEach(key => {
+      if (key !== 'id') {
+        fd.append(key, data[key])
+      }
+    })
+
     const xhr = new XMLHttpRequest()
     xhr.upload.addEventListener("progress", uploadProgress, false)
     xhr.addEventListener("load", uploadComplete, false)
     xhr.addEventListener("error", uploadFailed, false)
-    xhr.addEventListener("abort", uploadCanceled, false)
+    xhr.addEventListener("abort", uploadCancelled, false)
     xhr.open("POST", '/' + type + '/' + id + '/upload/')
     xhr.send(fd)
 
@@ -47,7 +55,7 @@ export function crud_upload(type, id, fd, dispatch) {
       })
     }
 
-    uploadFailed = function (evt) {
+    function uploadFailed (evt) {
       dispatch && dispatch({
         type: as_type(type, 'upload_error'),
         error: 'upload failed',
@@ -55,7 +63,7 @@ export function crud_upload(type, id, fd, dispatch) {
       })
     }
 
-    uploadCancelled  = function (evt) {
+    function uploadCancelled (evt) {
       dispatch && dispatch({
         type: as_type(type, 'upload_error'),
         error: 'upload cancelled',
diff --git a/app/client/common/fileUpload.component.js b/app/client/common/fileUpload.component.js
index 5a1291c..e723a0c 100644
--- a/app/client/common/fileUpload.component.js
+++ b/app/client/common/fileUpload.component.js
@@ -7,6 +7,18 @@ class FileUpload extends Component {
   }
   handleChange(e){
     this.props.onChange && this.props.onChange()
+    e.stopPropagation()
+    e.preventDefault()
+    this.setState({ thumbnails: [], images: [] })
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i, f
+    for (i = 0, f; i < files.length; i++) {
+      f = files[i]
+      if (!f) continue
+      break
+      // if (!f.type.match(this.props.mime)) continue
+    }
+    this.props.onUpload && this.props.onUpload(f)
   }
   render() {
     return (
diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js
index b6df614..533b108 100644
--- a/app/client/modules/samplernn/datasets.component.js
+++ b/app/client/modules/samplernn/datasets.component.js
@@ -54,14 +54,15 @@ class SampleRNNDatasets extends Component {
   }
   handleUpload(file) {
     const folder = this.props.samplernn.folder
-    this.props.actions.file.create({
-      folder_id: folder.id,
+    const fd = new FormData()
+    fd.append('file', file)
+    this.props.actions.folder.upload(fd, {
+      id: folder.id,
       module: 'samplernn',
       activity: 'url',
       epoch: 0,
       processed: false,
       generated: false,
-      url
     })
   }
   handleURL(url) {
@@ -133,7 +134,8 @@ class SampleRNNDatasets extends Component {
               {samplernn.folder.id &&
                 <FileUpload
                   title='Upload a file'
-                  onChange={this.handleUpload}
+                  mime='image.*'
+                  onUpload={this.handleUpload}
                 />
               }
               {samplernn.folder.id &&
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index c8e9635..e486e3f 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -46,6 +46,16 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         files: [action.data].concat(this.files)
       }
       return
+    case types.folder.upload_error:
+    console.log(action)
+      return state
+    case types.folder.upload_progress:
+    console.log(action)
+      return state
+    case types.folder.upload_complete:
+    console.log(action)
+      return state
+
     default:
       return state
   }