From 88787a43b70edf88cab7a8a003bd4d4cba575a05 Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Wed, 26 Jun 2024 10:39:14 +0200
Subject: [PATCH] Integrate the upload progressbar to file processor form field

---
 .../Builder/Field/Controller/FileProcessor.ts | 35 +++++++++++++++++++
 .../Builder/Field/Controller/FileProcessor.js | 29 +++++++++++++++
 .../install/files/style/ui/uploadHandler.scss |  6 +++-
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index c459c2c53a..14032d25e8 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -194,6 +194,38 @@ export class FileProcessor {
     }
   }
 
+  #trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void {
+    const progress = document.createElement("progress");
+    progress.classList.add("fileList__item__progress__bar");
+    progress.max = 100;
+    const readout = document.createElement("span");
+    readout.classList.add("fileList__item__progress__readout");
+
+    file.addEventListener("uploadProgress", (event: CustomEvent<number>) => {
+      progress.value = event.detail;
+      readout.textContent = `${event.detail}%`;
+
+      if (progress.parentNode === null) {
+        element.classList.add("fileProcessor__item--uploading");
+
+        const wrapper = document.createElement("div");
+        wrapper.classList.add("fileList__item__progress");
+        wrapper.append(progress, readout);
+
+        element.append(wrapper);
+      }
+    });
+  }
+
+  #removeUploadProgress(element: HTMLElement): void {
+    if (!element.classList.contains("fileProcessor__item--uploading")) {
+      return;
+    }
+
+    element.classList.remove("fileProcessor__item--uploading");
+    element.querySelector(".fileList__item__progress")?.remove();
+  }
+
   async #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): Promise<void> {
     if (container === null) {
       if (this.showBigPreview) {
@@ -233,6 +265,7 @@ export class FileProcessor {
     }
 
     try {
+      this.#trackUploadProgress(container, element);
       await element.ready;
 
       if (this.#replaceElement !== undefined) {
@@ -257,6 +290,8 @@ export class FileProcessor {
       }
       this.#markElementUploadHasFailed(container, element, reason);
       return;
+    } finally {
+      this.#removeUploadProgress(container);
     }
 
     if (this.showBigPreview) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
index 534125021a..e3d59923fc 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
@@ -156,6 +156,31 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 element.parentElement.parentElement.remove();
             }
         }
+        #trackUploadProgress(element, file) {
+            const progress = document.createElement("progress");
+            progress.classList.add("fileList__item__progress__bar");
+            progress.max = 100;
+            const readout = document.createElement("span");
+            readout.classList.add("fileList__item__progress__readout");
+            file.addEventListener("uploadProgress", (event) => {
+                progress.value = event.detail;
+                readout.textContent = `${event.detail}%`;
+                if (progress.parentNode === null) {
+                    element.classList.add("fileProcessor__item--uploading");
+                    const wrapper = document.createElement("div");
+                    wrapper.classList.add("fileList__item__progress");
+                    wrapper.append(progress, readout);
+                    element.append(wrapper);
+                }
+            });
+        }
+        #removeUploadProgress(element) {
+            if (!element.classList.contains("fileProcessor__item--uploading")) {
+                return;
+            }
+            element.classList.remove("fileProcessor__item--uploading");
+            element.querySelector(".fileList__item__progress")?.remove();
+        }
         async #registerFile(element, container = null) {
             if (container === null) {
                 if (this.showBigPreview) {
@@ -190,6 +215,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 container.append(fileSize);
             }
             try {
+                this.#trackUploadProgress(container, element);
                 await element.ready;
                 if (this.#replaceElement !== undefined) {
                     await (0, DeleteFile_1.deleteFile)(this.#replaceElement.fileId);
@@ -213,6 +239,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 this.#markElementUploadHasFailed(container, element, reason);
                 return;
             }
+            finally {
+                this.#removeUploadProgress(container);
+            }
             if (this.showBigPreview) {
                 element.dataset.previewUrl = element.link;
                 element.unbounded = true;
diff --git a/wcfsetup/install/files/style/ui/uploadHandler.scss b/wcfsetup/install/files/style/ui/uploadHandler.scss
index f09220b2a2..92b342b234 100644
--- a/wcfsetup/install/files/style/ui/uploadHandler.scss
+++ b/wcfsetup/install/files/style/ui/uploadHandler.scss
@@ -76,6 +76,10 @@
 	}
 }
 
-.fileUpload__preview__buttons {
+.fileUpload__preview:not(:empty) {
+	margin-top: 20px;
+}
+
+.fileUpload__preview__item__buttons {
 	margin-top: 5px;
 }
-- 
2.20.1