2 files changed, 65 insertions, 7 deletions

diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
index e97d3cd..68ef1e0 100644
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
+++ b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
@@ -2,9 +2,42 @@ import React, { Component } from 'react'
 // import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import actions from 'app/actions'
+// import actions from 'app/actions'
 
 class WaveUpload extends Component {
+  state = {
+    working: false,
+    status: "",
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.match('image.*')) break
+    }
+    if (!file) {
+      console.log('No file specified')
+      return
+    }
+    this.setState({ working: true, status: "Loading" })
+    const fileReader = new FileReader()
+    fileReader.onload = fileReaderEvent => {
+      fileReader.onload = null
+      this.processAudioFile({ file })
+    }
+    fileReader.readAsDataURL(file)
+  }
+
+  processAudioFile(file) {
+    var context = new (window.AudioContext);
+    source = context.createBufferSource();
+  }
+
   render() {
     const { episode, peaks } = this.props
     return (
@@ -14,11 +47,26 @@ class WaveUpload extends Component {
             Peaks: {peaks.length}
           </div>
         )}
-        {!episode.settings.audio && (
-          <div>
-            Upload an audio file
-          </div>
-        )}
+        <div className="uploadButton">
+          <button>
+            <span>
+              {episode.settings.audio
+                ? "Upload a new audio file"
+                : "Upload an audio file"
+              }
+            </span>
+          </button>
+          <input
+            type="file"
+            accept="audio/mp3"
+            onChange={this.upload.bind(this)}
+            required={this.props.required}
+          />
+        </div>
+        <small>Upload an MP3, encoded 192kbit constant bitrate, 44.1kHz stereo</small>
+        <div>
+          {this.state.status}
+        </div>
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/editor/align/sidebar.css b/animism-align/frontend/app/views/editor/align/sidebar.css
index e3edde8..4836127 100644
--- a/animism-align/frontend/app/views/editor/align/sidebar.css
+++ b/animism-align/frontend/app/views/editor/align/sidebar.css
@@ -39,7 +39,17 @@
 /* wavefile upload */
 
 .sidebar-content.wave-upload {
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem 0.75rem 1.5rem 0.75rem;
+}
+
+.wave-upload .uploadButton {
+  position: relative;
+  text-align: center;
+  margin: 1rem 0;
+}
+.wave-upload small {
+  display: block;
+  text-align: center;
 }
 
 /* table of contents */