Add file upload support

This commit is contained in:
Annika Backstrom 2019-12-17 12:12:53 -05:00
parent 4c79a7859a
commit 88fc77f0a5
6 changed files with 291 additions and 1193 deletions

1431
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -9,6 +9,22 @@ const ScriptRunner = require('./jukebox/scripts')(config);
const express = require('express'); const express = require('express');
const morgan = require('morgan'); const morgan = require('morgan');
const handlebars = require('express-handlebars'); 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'); const { createLogger, format, transports } = require('winston');
@ -134,8 +150,7 @@ app.patch('/api/tracks/:track', function(req, res, next) {
label = req.body.label, label = req.body.label,
tag = req.body.tag; 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 => {
db.run("UPDATE library SET label = ?, tag = ? WHERE uuid = ?", label, tag, track_uuid, (err, rows) => {
db.get("SELECT * FROM library WHERE uuid = ?", track_uuid, (err, row) => { db.get("SELECT * FROM library WHERE uuid = ?", track_uuid, (err, row) => {
res.send(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) { app.get('/library', function(req, res, next) {
res.render('library', { res.render('library', {
title: 'Library', title: 'Library',

View File

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

View File

@ -57,6 +57,7 @@
<template v-if="editing"> <template v-if="editing">
<form method="patch" :action="patch_url"> <form method="patch" :action="patch_url">
<select v-model="track.tag" :disabled="saving"> <select v-model="track.tag" :disabled="saving">
<option value=""></option>
<option :class="{unused: tag.tag_count == 0}" v-for="tag in tags"> <option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
{{ tag.tag }} {{ tag.tag }}
</option> </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({ var app = new Vue({
el: '#app', el: '#app',
data: appData, data: appData,
components: { components: {
'media-library': MediaLibrary, 'media-library': MediaLibrary,
'upload-box': UploadBox,
}, },
}); });

View File

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