Integrate the upload progressbar to file processor form field

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index c459c2c53aeddc6cc6a472f6643a8988e5825cc9..14032d25e86d35196f900879ccc7d9d89e12f338 100644 (file)
--- 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 534125021a369da97ef4e079b56d100f4486e487..e3d59923fc32ba5c45df7de1d387ca9eda6a7042 100644 (file)
--- 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 f09220b2a29340ecdfddc70a0f010c389b6b820c..92b342b234641046ca401751bd1a65c4d90e6aa9 100644 (file)
--- 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;
 }