From 6f5e53348fea14bd89b0b06f103f1c58424f0de4 Mon Sep 17 00:00:00 2001
From: sverben <59171289+sverben@users.noreply.github.com>
Date: Sat, 28 Oct 2023 12:24:39 +0200
Subject: [PATCH] Add upload progress indicator

---
 index.js          |  1 +
 public/album.css  | 36 ++++++++++++++++++++++++++++++++++++
 public/album.html |  4 ++++
 public/album.js   | 28 +++++++++++++++++++---------
 4 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/index.js b/index.js
index 87fe7d5..2417b5e 100644
--- a/index.js
+++ b/index.js
@@ -94,6 +94,7 @@ app.post("/upload/:album", djo.requireLogin, upload.array("photo"), async (req,
         const file = req.files[i];
 
         if (!file) continue;
+        file.path = file.path.replaceAll('\\', '/')
         if (file.mimetype.startsWith("video/")) {
             exec(`ffmpeg -i "${file.path}" -c:v libx264 -preset veryfast -crf 22 -c:a aac -b:a 128k -strict -2 "${file.path}.mp4"`, async (err, stdout, stderr) => {
                 if (err) return console.log(err);
diff --git a/public/album.css b/public/album.css
index 241af6b..b7b3253 100644
--- a/public/album.css
+++ b/public/album.css
@@ -208,3 +208,39 @@ body {
     filter: invert(1);
     height: 1.2em;
 }
+
+.uploading {
+    color: #fff;
+    background: #22222c;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.progress {
+    --progress: 0;
+    position: relative;
+    background: #303039;
+    height: 20px;
+    width: 100%;
+    max-width: 300px;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.progress::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: calc(100% * var(--progress));
+    background: lightgreen;
+    transition: .3s ease;
+}
diff --git a/public/album.html b/public/album.html
index 1b3fc1e..aba914e 100644
--- a/public/album.html
+++ b/public/album.html
@@ -50,5 +50,9 @@
         <p>Delete</p>
       </div>
     </div>
+    <div id="uploading" class="uploading">
+      <h2>Uploading...</h2>
+      <div id="progress" class="progress"></div>
+    </div>
   </body>
 </html>
diff --git a/public/album.js b/public/album.js
index e02c328..38279e3 100644
--- a/public/album.js
+++ b/public/album.js
@@ -14,6 +14,8 @@ const bulkDelete = document.getElementById("bulkDelete");
 const actions = document.getElementById("actions");
 const title = document.querySelector(".title");
 const edit = document.getElementById('edit')
+const uploading = document.getElementById('uploading')
+const progress = document.getElementById('progress')
 
 const months = [
     "January",
@@ -286,15 +288,23 @@ file.addEventListener("change", async e => {
     for (let i in file.files) {
         formData.append("photo", file.files[i]);
     }
-    let res = await fetch(`/upload/${album}`, {
-        method: "POST",
-        body: formData,
-    });
-
-    const body = await res.json();
-
-    if (body.error) return alert(body.msg);
-    window.location.reload();
+    const xhr = new XMLHttpRequest()
+    uploading.style.display = 'flex'
+    const success = await new Promise((resolve, reject) => {
+        xhr.upload.addEventListener("progress", (event) => {
+            if (event.lengthComputable) {
+                progress.style.setProperty('--progress', `${event.loaded / event.total}`)
+                console.log("upload progress:", event.loaded / event.total);
+            }
+        });
+        xhr.addEventListener("loadend", () => {
+            resolve(xhr.readyState === 4 && xhr.status === 200);
+        });
+
+        xhr.open('POST', `/upload/${album}`, true)
+        xhr.send(formData)
+    })
+    window.location.reload()
 })
 
 deleteBtn.addEventListener("click", () => {