Add file upload support

package.json

@@ -20,6 +20,7 @@
     "express-handlebars": "^3.1.0",
     "glob": "^7.1.6",
     "morgan": "^1.7.0",
+    "multer": "^1.4.2",
     "sqlite": "^3.0.3",
     "throttle-debounce": "^2.1.0",
     "utf-8-validate": "^5.0.2",

player.js

@@ -9,6 +9,22 @@ const ScriptRunner = require('./jukebox/scripts')(config);
 const express = require('express');
 const morgan = require('morgan');
 const handlebars = require('express-handlebars');
+const multer = require('multer');
+const uuid = require('uuid/v4');
+
+var storage = multer.diskStorage({
+  destination: function (req, file, cb) {
+    cb(null, config.media_path)
+  },
+  filename: function (req, file, cb) {
+    var track_uuid = uuid();
+    cb(null, track_uuid)
+  }
+});
+
+var upload = multer({
+  storage: storage,
+});
 
 const { createLogger, format, transports } = require('winston');
 
@@ -134,8 +150,7 @@ app.patch('/api/tracks/:track', function(req, res, next) {
     label = req.body.label,
     tag = req.body.tag;
 
-  console.log(track_uuid, req.body, label, tag);
-  db.run("UPDATE library SET label = ?, tag = ? WHERE uuid = ?", label, tag, track_uuid, (err, rows) => {
+  db.run("UPDATE library SET label = ?, tag = ? WHERE uuid = ?", label, tag, track_uuid, err => {
     db.get("SELECT * FROM library WHERE uuid = ?", track_uuid, (err, row) => {
       res.send(row);
     });
@@ -148,6 +163,12 @@ app.get('/api/tracks', function(req, res, next) {
   });
 });
 
+app.post('/api/tracks', upload.single('track'), function(req, res, next) {
+  db.run("INSERT INTO library (label, uuid) VALUES (?, ?)", req.file.originalname, req.file.filename, err => {
+    res.redirect('/library');
+  });
+});
+
 app.get('/library', function(req, res, next) {
   res.render('library', {
     title: 'Library',

static/css/index.css

@@ -8,9 +8,14 @@ body {
     margin: 1em;
 }
 h1 {
+    font-size: 2rem;
     margin: 0.5em 0;
     color: hsl(182.8, 70.2%, 42.2%)
 }
+h2 {
+    margin-bottom: 0.5ex;
+    font-size: 1.25rem;
+}
 li {
     margin-left: 1em;
 }
@@ -27,8 +32,11 @@ footer {
     padding: 1ex;
     border: 1px solid hsl(0, 0%, 88.2%);
 }
-
 option.unused {
     font-style: italic;
     color: red;
 }
+.upload-box {
+    margin: 2em 0;
+    padding: 1ex;
+}

static/library.js

@@ -57,6 +57,7 @@
         <template v-if="editing">
           <form method="patch" :action="patch_url">
             <select v-model="track.tag" :disabled="saving">
+              <option value=""></option>
               <option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
                 {{ tag.tag }}
               </option>
@@ -86,11 +87,24 @@
     `,
   };
 
+  const UploadBox = {
+    template: `
+      <div class="upload-box">
+        <h2>Upload File</h2>
+        <form method="post" action="/api/tracks" enctype="multipart/form-data">
+          <input name="track" type="file">
+          <input type="submit" value="Upload">
+        </form>
+      </div>
+    `
+  };
+
   var app = new Vue({
     el: '#app',
     data: appData,
     components: {
       'media-library': MediaLibrary,
+      'upload-box': UploadBox,
     },
   });
 

views/library.hbs

@@ -2,7 +2,8 @@
     <media-library
         v-bind:tracks="tracks"
         v-bind:tags="tags"
-    />
+    ></media-library>
+    <upload-box></upload-box>
 </div>
 <script src="/vue.debug.js"></script>
 <script src="/library.js"></script>