曲を投稿できるようにする

2024-02-13 11:58:04 +09:00
parent a318a177ea
commit 1b03e5d0e7
6 changed files with 146 additions and 17 deletions
--- a/public/upload/index.html
+++ b/public/upload/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>太鼓ウェブあっぷろーだー</title>
+    <link rel="stylesheet" href="./style.css">
+    <script src="./upload.js"></script>
+  </head>
+  <body>
+    <h1>太鼓ウェブあっぷろーだー</h1>
+
+    <form id="upload-form" enctype="multipart/form-data">
+      <label for="file_tja">TJA ファイル:</label>
+      <input type="file" name="file_tja" accept=".tja" required><br>
+
+      <label for="file_music">音楽ファイル:</label>
+      <input type="file" name="file_music" accept=".ogg,.mp3,.wav" required><br>
+
+      <br>
+      <button type="button" onclick="uploadFiles()">今すぐ投稿！ (30秒ほどかかる場合があります)</button>
+    </form>
+
+    <br>
+    <div id="error-view"></div>
+  </body>
+</html>
--- a/public/upload/style.css
+++ b/public/upload/style.css
@@ -0,0 +1,3 @@
+#error-view {
+  white-space: pre-line;
+}
--- a/public/upload/upload.js
+++ b/public/upload/upload.js
@@ -0,0 +1,27 @@
+function uploadFiles() {
+  const form = document.getElementById('upload-form');
+  const formData = new FormData(form);
+
+  fetch('/upload', {
+    method: 'POST',
+    body: formData,
+  })
+    .then(res => {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw new Error(res.url + " で " + res.status.toString() + " が発生しました。");
+      }
+    })
+    .then(data => {
+      if (data.success) {
+        alert("おめでとう！ファイルの投稿に成功しました！");
+      } else {
+        throw new Error(data.error);
+      }
+    })
+    .catch(error => {
+      console.error('エラー:', error);
+      document.getElementById("error-view").textContent = error;
+    });
+}