From 88787a43b70edf88cab7a8a003bd4d4cba575a05 Mon Sep 17 00:00:00 2001 From: Cyperghost 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) => { + 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 { 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