added web sound upload

2026-07-08 22:15:09 +00:00 · 2023-10-05 21:37:47 +02:00
parent a991164148
commit 8818de5f43
7 changed files with 1014 additions and 47 deletions
--- a/client/web/client.js
+++ b/client/web/client.js
@@ -0,0 +1,46 @@
+document.getElementById('uploadForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    var fileInput = document.getElementById('myFile');
+    var file = fileInput.files[0];
+
+    var objectURL = URL.createObjectURL(file);
+    var audio = new Audio(objectURL);
+
+    audio.addEventListener('loadedmetadata', function() {
+        var duration = audio.duration;
+        console.log(duration);
+
+        if (duration > 10) {
+            alert('File is longer than 10 seconds.');
+            return;
+        }
+
+        if (file.size > 1024 * 1024) {
+            alert('File is larger than 1MB.');
+            return;
+        }
+
+        if (file.name.split('.').pop().toLowerCase() !== 'mp3') {
+            alert('Only .mp3 files are allowed.');
+            return;
+        }
+
+        var formData = new FormData();
+        formData.append('myFile', file);
+
+        fetch('/upload', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.text())
+        .then(data => {
+            console.log(data);
+            alert('File uploaded successfully.');
+        })
+        .catch(error => {
+            console.error(error);
+            alert('An error occurred while uploading the file.');
+        });
+    });
+});
--- a/client/web/index.html
+++ b/client/web/index.html
@@ -0,0 +1,32 @@
+<html>
+    <head>
+        <!-- 
+            ugly interface just messing around with new style frameworks every new project or so
+        -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>RandomMemer upload sounds</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css" crossorigin="anonymous">
+    </head>
+
+    <body style="background-color: #333;">
+        <div class="grid-container">
+            <div class="grid-x grid-padding-x align-center-middle" style="height: 100vh;">
+                <div class="cell small-12 medium-6 large-4">
+                    <form id="uploadForm" enctype="multipart/form-data">
+                        <div class="callout">
+                            <h3>Upload Sound</h3>
+                            <div class="input-group">
+                                <span class="input-group-label">File:</span>
+                                <input class="input-group-field" type="file" id="myFile">
+                            </div>
+                            <button class="button expanded" type="submit">Upload</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        
+        <script src="client.js"></script>
+    </body>
+</html>
--- a/client/webserver.ts
+++ b/client/webserver.ts
@@ -0,0 +1,40 @@
+import express from 'express';
+import multer, { diskStorage } from 'multer';
+import path from 'path';
+import { LoggerColors } from '../bot';
+
+const app = express();
+const storage = diskStorage({
+    destination: 'sounds/',
+    filename: function (_req, file, cb) {
+        cb(null, Date.now() + '-' + file.originalname);
+    }
+});
+
+const upload = multer({ 
+    storage: storage,
+    limits: { fileSize: 1 * 1024 * 1024 },
+    fileFilter: function (_req, file, cb) {
+        if (path.extname(file.originalname) !== '.mp3') {
+            return cb(new Error('Only .mp3 files are allowed'));
+        }
+        cb(null, true);
+    }
+});
+
+app.get('/', (_req, res) => {
+    res.sendFile(path.join(__dirname, 'web/index.html'));
+});
+
+app.post('/upload', upload.single('myFile'), async (req, res) => {
+    res.send('File uploaded successfully.');
+});
+
+app.use(express.static(path.join(__dirname, "web")));
+
+export function startServer() {
+    const port = 8080;
+    app.listen(port, () => {
+        console.log(LoggerColors.Cyan,`Add sounds at http://localhost:${port}, or drop in the sounds folder.`);
+    });
+}