Add multiple uploads

Author: jarnalyrkar

api/file/create.php

@@ -3,39 +3,46 @@
 $db = new DB();
 
 $data = null;
-
-if (!isset($_FILES['file'])) {
-  echo json_encode(['message' => 'No file found', 'data' => file_get_contents( 'php://input' )]);
+if (!isset($_FILES) || count($_FILES) === 0) {
+  echo json_encode(['message' => 'No files found', 'data' => file_get_contents( 'php://input' )]);
   return;
 }
 if (!isset($_POST['track_id'])) {
   echo json_encode(['message' => 'Missing track id']);
   return;
 }
 
-$existing = $db->get_file_by_name($_FILES['file']['name']);
-if ($existing) {
-  $db->add_file_to_track($existing, htmlspecialchars($_POST['track_id']));
-  header("Content-Type: application/json");
-  http_response_code(200);
-  echo json_encode($existing);
-  exit();
-}
+$results = [];
+for ($i = 0; $i < count($_FILES); $i++) {
 
-$allowedFormats = ['mp3', 'flac', 'ogg', 'vorbis', 'wav', 'mp4'];
-$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
-if (in_array($extension, $allowedFormats)) {
-  $path = $_SERVER['DOCUMENT_ROOT'] . "/" . $db->get_media_folder();
-  $filename = $_FILES['file']['name'];
-  $pathAndFilename = $path . "/" . $filename;
-  move_uploaded_file($_FILES['file']['tmp_name'], $pathAndFilename);
-  header("Content-Type: application/json");
-  http_response_code(200);
-  echo json_encode($db->create_file(htmlspecialchars($filename), htmlspecialchars($_POST['track_id'])));
-} else {
-  header("Content-Type: application/json");
-  http_response_code(400);
-  echo json_encode($extension . " not supported");
-}
+  $existing = $db->get_file_by_name($_FILES["file-$i"]['name']);
+  if ($existing) {
+    $results['files'][] = [
+      'id' => $db->add_file_to_track($existing, htmlspecialchars($_POST['track_id'])),
+      'name' => $existing,
+    ];
+    $results['messages'][] = "File $existing already exists. Adding to track.";
+  }
 
+  $allowedFormats = ['mp3', 'flac', 'ogg', 'vorbis', 'wav', 'mp4'];
+  $extension = pathinfo($_FILES["file-$i"]['name'], PATHINFO_EXTENSION);
+  if (in_array($extension, $allowedFormats)) {
+    $path = $_SERVER['DOCUMENT_ROOT'] . "/" . $db->get_media_folder();
+    $filename = $_FILES["file-$i"]['name'];
+    $pathAndFilename = $path . "/" . $filename;
+    move_uploaded_file($_FILES["file-$i"]['tmp_name'], $pathAndFilename);
+    $db->create_file(htmlspecialchars($filename), htmlspecialchars($_POST['track_id']));
+    $results['files'][] = [
+      'id' => $db->create_file(htmlspecialchars($filename), htmlspecialchars($_POST['track_id'])),
+      'name' => $filename,
+    ];
+  } else {
+    $results['messages'][] = "$extension not supported, in file " . $_FILES["file-$i"]['name'];
+  }
+}
+header("Content-Type: application/json");
+http_response_code(200);
+echo json_encode($results);
 exit();
+
+

assets/js/script.js

@@ -625,9 +625,9 @@ document.addEventListener('click', (ev) => {
       const empty = dialog.querySelector('.empty')
       if (empty) empty.remove()
 
-      const file = document.querySelector('#new-file').files[0]
+      const files = document.querySelector('#new-file').files
       const data = new FormData()
-      data.append('file', file)
+      Array.from(files).forEach((file, i) => data.append('file-'+i, file))
       data.append('track_id', track_id)
       fetch('/api/file/create.php', {
         method: 'POST',
@@ -636,19 +636,23 @@ document.addEventListener('click', (ev) => {
       .then(data => {
         const spinner = document.createElement('div')
         spinner.classList.add('spinner')
-        spinner.innerHTML = "Converting..."
+        spinner.innerHTML = "Creating..."
         document.querySelector('.files').appendChild(spinner)
         if (data.status === 200) {
-          data.json().then(id => {
-            const template = document.querySelector('#file')
-            const clone = template.content.cloneNode(true)
-            const li = clone.querySelector('li')
-            li.setAttribute('data-filename', file.name)
-            li.setAttribute('data-id', id)
-            li.querySelector('.file__name').innerHTML = file.name
-            document.querySelector('.files').appendChild(clone)
-            tagTracksWithoutFiles()
-            document.querySelector('.spinner').remove()
+          data.json().then(res => {
+            if (res.files) {
+              res.files.forEach(file => {
+                const template = document.querySelector('#file')
+                const clone = template.content.cloneNode(true)
+                const li = clone.querySelector('li')
+                li.setAttribute('data-filename', file.name)
+                li.setAttribute('data-id', file.id)
+                li.querySelector('.file__name').innerHTML = file.name
+                document.querySelector('.files').appendChild(clone)
+                tagTracksWithoutFiles()
+                document.querySelector('.spinner').remove()
+              })
+            }
           })
         }
       })

gmplayer.db

@@ -14,7 +14,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Dungeon Master Player</title>
+  <title>Game Master Player</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/assets/js/color-picker/index.min.css">
@@ -53,13 +53,13 @@
     $title = "Themes";
     $data_type = "theme";
     $items = $db->get_themes();
-    $placeholder = "E.g Dungeon, Airship, Mountains, Village";
+    $placeholder = "E.g The Heart of Flamespike Citadel";
     include $partials . "section.php";
 
     $title = "Presets";
     $data_type = "preset";
     $items = $db->get_presets_by_theme($active_theme_id);
-    $placeholder = "E.g Busy townsquare, Quiet Night, Execution";
+    $placeholder = "E.g Tavern, Forest, Temple, Goblin Hideout";
     ?>
     <div class="action-section">
       <?php
@@ -76,8 +76,6 @@
   </aside>
 
   <?php include $partials . "footer.php"; ?>
-  <?php // TODO: get from and save to db
-  ?>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>
   <script src="/assets/js/color-picker/index.min.js"></script>

index.php

@@ -66,8 +66,8 @@
         <div class="dialog__inner">
           <button data-action="close-dialog" aria-label="close dialog" title="Close settings">&times;</button>
           <form action="/api/file/create.php" method="post" enctype="multipart/form-data">
-            <input type="file" id="new-file" name="new-file">
-            <label class="file-upload" data-action="add-file" for="new-file">Add file to track...</label>
+            <input type="file" id="new-file" name="new-file" multiple>
+            <label class="file-upload" data-action="add-file" for="new-file">Add file(s) to track...</label>
           </form>
           <div class="dialog__files">
             <h2>Files in track:</h2>