Audiofile upload

hugvey/panopticon.py

@@ -97,6 +97,16 @@ class NonCachingStaticFileHandler(tornado.web.StaticFileHandler):
         
 def getUploadHandler(central_command):
     class UploadHandler(tornado.web.RequestHandler):
+        def set_default_headers(self):
+            # headers for CORS
+            self.set_header("Access-Control-Allow-Origin", "*")
+            self.set_header("Access-Control-Allow-Headers", "x-requested-with")
+            self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
+        def options(self):
+            # OPTIONS request for CORS
+            self.set_status(204)
+            self.finish()
+
         def post(self):
             print('upload')
             langCode = self.get_argument("language")
@@ -113,17 +123,21 @@ def getUploadHandler(central_command):
                 original_fname = audioFile['filename']
                 fname = ''.join(random.choice(string.ascii_lowercase + string.digits) for x in range(10))
                 ext = os.path.splitext(original_fname)[1]
-                audioFilename = os.path.join(central_command.config['web']['files_dir'], fname + ext)
+                audioFilename = os.path.join(central_command.config['web']['files_dir'], langCode, fname + ext)
                 for i, data in enumerate(storyData):
                     if data['@id'] != msgId:
                         continue
+                    if 'audio' in storyData[i] and os.path.exists(storyData[i]['audio']['file']):
+                        logger.info(f"Remove previous file {storyData[i]['audio']['file']} ({storyData[i]['audio']['original_name']})")
+                        os.unlink(storyData[i]['audio']['file'])
+                        
                     storyData[i]['audio'] = {
                         'file': audioFilename,
                         'original_name': original_fname
                     }
-                    with open(audioFilename, 'r') as fp:
+                    with open(audioFilename, 'wb') as fp:
                         logger.info(f'Save {original_fname} to {audioFilename}')
-#                         fp.write(audioFile['body'])
+                        fp.write(audioFile['body'])
                     break
             
             print(os.path.abspath(langFile))
@@ -131,6 +145,7 @@ def getUploadHandler(central_command):
                 logger.info(f'Save story to {langFile} {json_fp}')
                 json.dump(storyData, json_fp)
             self.finish()
+            
     return UploadHandler
 
 class Panopticon(object):

local

@@ -1 +1 @@
-Subproject commit 5c90637e81eda5fa4c9a80ae10804c3106941cc7
+Subproject commit 9112548c869a139e3b7fa88ba6d026e107b1064a

www/css/styles.css

@@ -116,7 +116,7 @@ body {
     display: block;
     margin: 0 -10px;
     padding: 5px 10px; }
-  #story label input, #story label select {
+  #story label input, #story label select, #story label .label-value {
     float: right; }
   #story label:nth-child(odd) {
     background-color: rgba(255, 255, 255, 0.3); }

www/js/hugvey_console.js

@@ -215,6 +215,20 @@ class Graph {
         if ( msg['start'] == true ) {
             startAttributes['checked'] = 'checked';
         }
+        let audioSpan = crel(
+                'span',
+                {
+                    'title':  msg['audio'] ?  msg['audio']['file'] : "",
+                    'class': "label-value",
+                },
+                msg['audio'] ? msg['audio']['original_name'] : "" 
+            );
+        if(msg['audio']) {
+            audioSpan.appendChild(crel(
+                    'audio', {'controls': 'controls'},
+                    crel('source', {'src':msg['audio']['file']})
+                    ));
+        }
         let msgInfoEl = crel( 'div', { 'class': 'msg__info' },
             crel( 'h1', { 'class': 'msg__id' }, msg['@id'] ),
             crel( 'label',
@@ -230,11 +244,30 @@ class Graph {
             crel( 'label',
                 crel( 'span', 'Start' ),
                 crel( 'input', startAttributes )
+            ),
+
+            crel( 'label',
+                crel( 'span', 'Audio' ),
+                audioSpan,
+                crel( 'input', {
+                    'type': 'file',
+                    'name': 'audio',
+                    'accept': '.wav,.ogg,.mp3',
+                    'on': {
+                        'change': function(e) {
+                            audioSpan.innerHTML = "...";
+                            panopticon.graph.saveJson(msg['@id'], e.target, function(e2){
+                                console.log(e);
+                                audioSpan.innerHTML = e.target.files[0].name + "<sup>*</sup>";
+                            });
+//                            console.log(this,e);
+                        }
+                    }
+                } )
             )
         );
         msgEl.appendChild( msgInfoEl );
         
-//        crel('form')
 
         // let directionHEl = document.createElement('h2');
         // directionHEl.innerHTML = "Directions";
@@ -602,7 +635,7 @@ class Graph {
         }
     }
 
-    saveJson( msg_id, fileInputElement ) {
+    saveJson( msg_id, fileInputElement, callback ) {
         if ( !this.language_code ) {
             alert( "Make sure to load a language first" )
         }
@@ -621,6 +654,11 @@ class Graph {
         console.log( formData );
         var request = new XMLHttpRequest();
         request.open( "POST", "http://localhost:8888/upload" );
+        
+        if(callback) {
+            request.addEventListener( "load", callback);
+        }
+        
         request.send( formData );
     }
 

www/scss/styles.scss

@@ -167,7 +167,7 @@ body{
         margin: 0 -10px;
         padding: 5px 10px;
     }
-    label input,label select{
+    label input,label select, label .label-value{
         float: right;
     }
     label:nth-child(odd){