@leogps/file-uploader 2.0.3 → 2.0.4

package/dist/client/{main.5f2a69fd2944bb03bad4.bundle.js → main.5b512c69d6a84b326aa0.bundle.js}

@@ -1912,36 +1912,6 @@ module.exports = setup;
 })));
 
 
-/***/ }),
-
-/***/ 791:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.computeSHA1 = void 0;
-const js_sha1_1 = __webpack_require__(9668);
-const computeSHA1 = async (blob) => {
-    if (window.crypto && crypto.subtle && crypto.subtle.digest) {
-        try {
-            const buffer = await blob.arrayBuffer();
-            const hashBuffer = await crypto.subtle.digest("SHA-1", buffer);
-            const hashArray = Array.from(new Uint8Array(hashBuffer));
-            return hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
-        }
-        catch (err) {
-            console.warn("WebCrypto SHA-1 failed, falling back to js-sha1:", err);
-        }
-    }
-    // Fallback to js-sha1
-    const arrayBuffer = await blob.arrayBuffer();
-    const bytes = new Uint8Array(arrayBuffer);
-    return (0, js_sha1_1.sha1)(bytes);
-};
-exports.computeSHA1 = computeSHA1;
-
-
 /***/ }),
 
 /***/ 838:
@@ -6096,229 +6066,6 @@ const decode = (base64) => {
 exports.decode = decode;
 
 
-/***/ }),
-
-/***/ 2844:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-/* provided dependency */ var $ = __webpack_require__(4692);
-/* provided dependency */ var jQuery = __webpack_require__(4692);
-
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ProgressHandler = void 0;
-const socket_io_client_1 = __webpack_require__(8007);
-const progress_utils_1 = __webpack_require__(4753);
-const moment_1 = __importDefault(__webpack_require__(5093));
-const pretty_bytes_1 = __importDefault(__webpack_require__(281));
-const _progressDivCache = new Map();
-const stateColorMap = {
-    COMPLETE: "is-success",
-    FAILED: "is-danger",
-};
-class ProgressHandler {
-    addToDomCache(progressId, $panel) {
-        _progressDivCache.set(progressId, $panel);
-        this.updateCollapseAllVisibility();
-    }
-    getFromDomCache(progressId) {
-        return _progressDivCache.get(progressId);
-    }
-    domCacheSize() {
-        return _progressDivCache.size;
-    }
-    registerHandler() {
-        console.log("Registering Progress Handler...");
-        const socket = (0, socket_io_client_1.io)();
-        socket.emit("message", "Connected.");
-        socket.on("progresses", (progresses) => {
-            this.handleProgresses(progresses);
-        });
-        this.registerAllDetailToggleEventHandler();
-        console.log("Progress handler registration complete.");
-    }
-    updateCollapseAllVisibility() {
-        const $control = $(".all-progress-detail-control");
-        if (this.domCacheSize() > 0) {
-            $control.removeClass("is-hidden");
-        }
-        else {
-            $control.addClass("is-hidden");
-        }
-        const $parentElem = jQuery(".single-progress-container");
-        const $btn = jQuery(".all-progress-detail-control button");
-        const $progressDetailElems = $parentElem
-            .find("[id^='progressTableContainer-']");
-        const $hiddenProgressDetailElems = $parentElem
-            .find("[id^='progressTableContainer-'].is-hidden");
-        const allHidden = $hiddenProgressDetailElems.length === $progressDetailElems.length;
-        const buttonLabel = allHidden ? "Expand All" : "Collapse All";
-        $btn.text(buttonLabel);
-    }
-    registerAllDetailToggleEventHandler() {
-        const $btn = jQuery(".all-progress-detail-control button");
-        $btn.on("click", () => {
-            const collapseAll = $btn.text().trim() === "Collapse All";
-            const newLabel = collapseAll ? "Expand All" : "Collapse All";
-            $btn.text(newLabel);
-            // Loop through every progress panel
-            jQuery(".single-progress-container").each((_, panel) => {
-                const $panel = jQuery(panel);
-                const $toggle = $panel.find(".progress-detail-control");
-                const $icon = $toggle.find("i");
-                // table container selector
-                const panelId = $panel.attr("id");
-                const tableContainerId = `progressTableContainer-${panelId}`;
-                const $tableContainer = jQuery(`#${tableContainerId}`);
-                if (collapseAll) {
-                    // collapse everything
-                    $toggle.removeClass("is-active");
-                    $tableContainer.addClass("is-hidden");
-                    $icon.removeClass("fa-minus-circle").addClass("fa-plus-circle")
-                        .attr("title", "expand");
-                }
-                else {
-                    // expand everything
-                    $toggle.addClass("is-active");
-                    $tableContainer.removeClass("is-hidden");
-                    $icon.removeClass("fa-plus-circle").addClass("fa-minus-circle")
-                        .attr("title", "collapse");
-                }
-            });
-        });
-    }
-    registerDetailToggleEventHandler($panel, tableContainerId) {
-        $panel.on("click", ".progress-detail-control", (event) => {
-            const $btn = jQuery(event.currentTarget);
-            const $tableContainer = jQuery(`#${tableContainerId}`);
-            // toggle active class
-            const isActive = $btn.toggleClass("is-active").hasClass("is-active");
-            // toggle content visibility
-            if (isActive) {
-                $tableContainer.removeClass("is-hidden");
-            }
-            else {
-                $tableContainer.addClass("is-hidden");
-            }
-            // toggle icon
-            const $icon = $btn.find("i");
-            if (isActive) {
-                // expanded → show minus
-                $icon.removeClass("fa-plus-circle").addClass("fa-minus-circle");
-                $icon.attr("title", "collapse");
-            }
-            else {
-                // collapsed → show plus
-                $icon.removeClass("fa-minus-circle").addClass("fa-plus-circle");
-                $icon.attr("title", "expand");
-            }
-            // no need for _this alias
-            this.updateCollapseAllVisibility();
-        });
-    }
-    handleProgresses(progresses) {
-        const $progressContainer = jQuery("div#progress-container");
-        progresses.forEach(progress => {
-            const progressId = `progress-${progress.uuid}`;
-            const uploaded = progress.uploadedChunks?.length ?? 0;
-            const uploading = progress.uploadingChunks?.length ?? 0;
-            const totalChunks = progress.totalChunks ?? 1;
-            const colorKey = progress.lastState;
-            const stateColor = stateColorMap[colorKey] || "";
-            // Container box
-            let $panel = this.getFromDomCache(progressId);
-            const tableContainerId = `progressTableContainer-${progressId}`;
-            if (!$panel) {
-                $panel = jQuery(`<article id="${progressId}" class="progress-panel panel is-bordered single-progress-container mb-4"></article>`);
-                $progressContainer.prepend($panel);
-                this.addToDomCache(progressId, $panel);
-                this.registerDetailToggleEventHandler($panel, tableContainerId);
-            }
-            // Remove existing progress colors
-            $panel.removeClass("is-success is-danger is-info is-warning");
-            $panel.addClass(stateColor || "is-info");
-            // Add file name as a heading above the table
-            const panelHeadingId = `panelHeading-${progressId}`;
-            let $panelHeading = $panel.find(`#${panelHeadingId}`);
-            if (!$panelHeading.length) {
-                $panelHeading = jQuery(`<div id="${panelHeadingId}" class="panel-heading wrap-text is-flex-wrap-wrap p-2 has-text-weight-normal is-size-6 mb-1">
-                    <a class="progress-detail-control is-active ml-1 mr-1">
-                        <span class="panel-icon m-0 p-0">
-                          <i class="fas fa-minus-circle m-0 p-0" aria-hidden="true" title="collapse"></i>
-                        </span>
-                    </a>
-                    <span class="upload-file-name ml-0 pl-0">
-                        ${progress.fileName}
-                    </span>
-                </div>`);
-                $panel.append($panelHeading);
-            }
-            $panelHeading.find(".upload-file-name").text(progress.fileName || "");
-            // Main progress bar (bytes)
-            let $progressElem = $panel.find(`progress#${progressId}`);
-            if (!$progressElem.length) {
-                $progressElem = jQuery(`<progress id="${progressId}" class="progress is-info is-small">`);
-                $panel.append($progressElem);
-            }
-            $progressElem.attr("max", (progress.bytesExpected || 100));
-            $progressElem.attr("value", (progress.bytesReceived || 0));
-            // Remove existing progress colors
-            $progressElem.removeClass("is-success is-danger is-info is-warning");
-            $progressElem.addClass(stateColor || "is-info");
-            let $tableContainer = $panel.find(`#${tableContainerId}`);
-            if (!$tableContainer.length) {
-                $tableContainer = jQuery(`<div id="${tableContainerId}" class="panel-block table-container m-0 p-0"></div>`);
-                $panel.append($tableContainer);
-            }
-            const tableId = `progressTable-${progressId}`;
-            let $table = $tableContainer.find(`#${tableId}`);
-            if (!$table.length) {
-                $table = jQuery(`<table id="${tableId}" class="table is-fullwidth is-bordered is-striped"></table>`);
-                $tableContainer.append($table);
-            }
-            // Clear previous rows
-            $table.empty();
-            let progressPercent = 0;
-            if (progress.bytesReceived !== undefined && progress.bytesExpected !== undefined) {
-                progressPercent = (progress.bytesReceived / progress.bytesExpected) * 100;
-            }
-            // Define table rows
-            const rows = [
-                // ["File Name", progress.fileName || "-"],
-                // ["Location", progress.savedLocation || "-"],
-                ["Started", (0, moment_1.default)(progress.timestamp).format("MMMM Do YYYY, h:mm:ss a")],
-                ["Transferred", `${(0, pretty_bytes_1.default)(progress.bytesReceived || 0)} / ${(0, pretty_bytes_1.default)(progress.bytesExpected || 0)}`],
-                ["Chunks", `Verified ${progress.chunkVerificationCount || 0} 
-                    <b>|</b> Uploading: ${uploading} 
-                    <b>|</b> Uploaded: ${uploaded}/${totalChunks}`],
-                ["Speed", `${(0, pretty_bytes_1.default)(progress_utils_1.ProgressUtils.calculateTransferRate(progress))}/s`],
-                ["Status", `${progress.lastState || "-"}`],
-                ["Progress", `${progressPercent.toFixed(2)}%`],
-            ];
-            if (progress.completed) {
-                const timeTaken = ((progress.completed - (progress.timestamp || 0)) / 1000).toFixed(2);
-                rows.push(["Completed in", `${timeTaken} sec`]);
-            }
-            // Append rows
-            for (const [key, value] of rows) {
-                $table.append(`<tr><th class="is-narrow">${key}</th><td>${value}</td></tr>`);
-            }
-            const horizontalRulerId = `horizontalRuler-${progressId}`;
-            let $horizontalRuler = $panel.find(`#${horizontalRulerId}`);
-            if (!$horizontalRuler.length) {
-                $horizontalRuler = jQuery(`<hr id="${horizontalRulerId}" class="is-one-third mt-3 mb-1">`);
-                $panel.append($horizontalRuler);
-            }
-            this.updateCollapseAllVisibility();
-        });
-    }
-}
-exports.ProgressHandler = ProgressHandler;
-
-
 /***/ }),
 
 /***/ 2934:
@@ -6581,6 +6328,48 @@ exports.ProgressHandler = ProgressHandler;
 })));
 
 
+/***/ }),
+
+/***/ 3037:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ProgressUtils = void 0;
+class ProgressUtils {
+    static calculateTransferRate(progress) {
+        const samples = progress.transferSamples;
+        if (!samples || samples.length < 2) {
+            return 0;
+        }
+        let totalBytes = 0;
+        let totalTimeMs = 0;
+        // Case vs Reason for skipping
+        // bytes === 0	idle / waiting / verification
+        // bytes < 0	possibly corrupted or reset counter
+        // timeMs === 0	divide-by-zero risk
+        // timeMs < 0	invalid timestamp
+        // To prevent idle gaps from dragging the rate down artificially.
+        for (let i = 1; i < samples.length; i++) {
+            const prev = samples[i - 1];
+            const curr = samples[i];
+            const bytes = curr.bytesReceived - prev.bytesReceived;
+            const timeMs = curr.timestamp - prev.timestamp;
+            if (bytes > 0 && timeMs > 0) {
+                totalBytes += bytes;
+                totalTimeMs += timeMs;
+            }
+        }
+        if (totalTimeMs === 0) {
+            return 0;
+        }
+        return totalBytes / (totalTimeMs / 1000);
+    }
+}
+exports.ProgressUtils = ProgressUtils;
+
+
 /***/ }),
 
 /***/ 3164:
@@ -21009,48 +20798,6 @@ return jQuery;
 })));
 
 
-/***/ }),
-
-/***/ 4753:
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ProgressUtils = void 0;
-class ProgressUtils {
-    static calculateTransferRate(progress) {
-        const samples = progress.transferSamples;
-        if (!samples || samples.length < 2) {
-            return 0;
-        }
-        let totalBytes = 0;
-        let totalTimeMs = 0;
-        // Case vs Reason for skipping
-        // bytes === 0	idle / waiting / verification
-        // bytes < 0	possibly corrupted or reset counter
-        // timeMs === 0	divide-by-zero risk
-        // timeMs < 0	invalid timestamp
-        // To prevent idle gaps from dragging the rate down artificially.
-        for (let i = 1; i < samples.length; i++) {
-            const prev = samples[i - 1];
-            const curr = samples[i];
-            const bytes = curr.bytesReceived - prev.bytesReceived;
-            const timeMs = curr.timestamp - prev.timestamp;
-            if (bytes > 0 && timeMs > 0) {
-                totalBytes += bytes;
-                totalTimeMs += timeMs;
-            }
-        }
-        if (totalTimeMs === 0) {
-            return 0;
-        }
-        return totalBytes / (totalTimeMs / 1000);
-    }
-}
-exports.ProgressUtils = ProgressUtils;
-
-
 /***/ }),
 
 /***/ 4903:
@@ -27191,6 +26938,36 @@ Object.defineProperty(exports, "nextTick", ({ enumerable: true, get: function ()
 })));
 
 
+/***/ }),
+
+/***/ 5131:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.computeSHA1 = void 0;
+const js_sha1_1 = __webpack_require__(9668);
+const computeSHA1 = async (blob) => {
+    if (window.crypto && crypto.subtle && crypto.subtle.digest) {
+        try {
+            const buffer = await blob.arrayBuffer();
+            const hashBuffer = await crypto.subtle.digest("SHA-1", buffer);
+            const hashArray = Array.from(new Uint8Array(hashBuffer));
+            return hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
+        }
+        catch (err) {
+            console.warn("WebCrypto SHA-1 failed, falling back to js-sha1:", err);
+        }
+    }
+    // Fallback to js-sha1
+    const arrayBuffer = await blob.arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    return (0, js_sha1_1.sha1)(bytes);
+};
+exports.computeSHA1 = computeSHA1;
+
+
 /***/ }),
 
 /***/ 5177:
@@ -27966,7 +27743,7 @@ function utf8Length(str) {
 
 /***/ }),
 
-/***/ 5600:
+/***/ 5668:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
@@ -27977,11 +27754,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-const progress_handler_1 = __webpack_require__(2844);
+const progress_handler_1 = __webpack_require__(5792);
 __webpack_require__(5838);
 __webpack_require__(9968);
 const toastify_js_1 = __importDefault(__webpack_require__(7736));
-const sha1_1 = __webpack_require__(791);
+const sha1_1 = __webpack_require__(5131);
 const MAX_COMPLETE_CHECK_RETRIES = 20;
 const COMPLETE_CHECK_RETRY_DELAY_MS = 1000;
 jQuery(() => {
@@ -27990,6 +27767,19 @@ jQuery(() => {
     const pageEventRegistrar = new PageEventRegistrar();
     pageEventRegistrar.registerEvents();
 });
+const asyncPool = async (poolLimit, array, iteratorFn) => {
+    const executing = new Set();
+    for (const item of array) {
+        const p = Promise.resolve().then(() => iteratorFn(item));
+        executing.add(p);
+        const clean = () => executing.delete(p);
+        p.then(clean).catch(clean);
+        if (executing.size >= poolLimit) {
+            await Promise.race(executing);
+        }
+    }
+    await Promise.all(executing);
+};
 class PageEventRegistrar {
     registerEvents() {
         this.registerThemeSelectionEventHandler();
@@ -28062,35 +27852,40 @@ class PageEventRegistrar {
                     }).showToast();
                     return;
                 }
-                const disableChunked = (jQuery("#disableChunkedUpload").prop("checked") === true);
                 // Block form before uploading
                 $uploadForm.block({
                     message: '<h1 class="upload-block-modal p-2 m-0">Uploading...</h1>'
                 });
-                try {
-                    // Upload all files sequentially
-                    for (const file of Array.from(files)) {
-                        if (disableChunked) {
-                            await this.uploadFileNonChunked(file);
-                        }
-                        else {
-                            await this.uploadFile(file);
-                        }
+                const disableChunked = (jQuery("#disableChunkedUpload").prop("checked") === true);
+                console.log("disableChunked?", disableChunked);
+                const serverConfigResponse = await this.retrieveConfig();
+                const errorMessage = serverConfigResponse.error;
+                if (errorMessage) {
+                    let errorText = errorMessage;
+                    const errorObject = serverConfigResponse.errorObject;
+                    const errorObjectMessage = errorObject instanceof Error ? errorObject.message : String(errorObject);
+                    if (serverConfigResponse.errorObject) {
+                        errorText = `${errorText}. ${errorObjectMessage}`;
                     }
+                    console.error(errorText);
+                    (0, toastify_js_1.default)({
+                        text: errorText,
+                        duration: -1,
+                        close: true,
+                        style: { background: "linear-gradient(to right, #F39454, #FF6600)" }
+                    }).showToast();
                 }
-                finally {
-                    // Unblock and reset form after all files finish
-                    $uploadForm.trigger("reset");
-                    const $fileDiv = jQuery("#file-div");
-                    const $fileNameDiv = $fileDiv.find("#file-name");
-                    const $fileInput = jQuery("form#uploadForm input[name='file']");
-                    this.onFilesChange($fileNameDiv, $fileInput);
-                    $uploadForm.unblock();
-                }
+                const serverConfigJson = serverConfigResponse.response;
+                await this.doUpload(files, {
+                    $uploadForm,
+                    serverConfig: serverConfigJson,
+                    disableChunkedUpload: disableChunked,
+                });
             })().catch(err => {
+                const message = err instanceof Error ? err.message : String(err);
                 console.error("Error during upload:", err);
                 (0, toastify_js_1.default)({
-                    text: `Upload error: ${err}`,
+                    text: `Upload failed: ${message}`,
                     duration: -1,
                     close: true,
                     style: { background: "linear-gradient(to right, #F39454, #FF6600)" }
@@ -28098,6 +27893,40 @@ class PageEventRegistrar {
             });
         });
     }
+    async doUpload(files, { disableChunkedUpload = false, serverConfig, $uploadForm, }) {
+        try {
+            let maxParallelFileUploads = 1;
+            if (serverConfig != null) {
+                maxParallelFileUploads = serverConfig.maxParallelFileUploads;
+            }
+            console.log(`Max parallel file uploads: ${maxParallelFileUploads}`);
+            await asyncPool(maxParallelFileUploads, Array.from(files), async (file) => {
+                if (disableChunkedUpload) {
+                    await this.uploadFileNonChunked(file);
+                }
+                else {
+                    await this.uploadFile(file);
+                }
+            }).catch(err => {
+                console.error("Error during upload:", err);
+                (0, toastify_js_1.default)({
+                    text: `Upload failed: ${err}`,
+                    duration: -1,
+                    close: true,
+                    style: { background: "linear-gradient(to right, #F39454, #FF6600)" }
+                }).showToast();
+            });
+        }
+        finally {
+            // Unblock and reset form after all files finish
+            $uploadForm.trigger("reset");
+            const $fileDiv = jQuery("#file-div");
+            const $fileNameDiv = $fileDiv.find("#file-name");
+            const $fileInput = jQuery("form#uploadForm input[name='file']");
+            this.onFilesChange($fileNameDiv, $fileInput);
+            $uploadForm.unblock();
+        }
+    }
     async uploadFileNonChunked(file) {
         const formData = new FormData();
         // Server-side uses formidable({ multiples: true }) so using the same field name is fine
@@ -28135,7 +27964,7 @@ class PageEventRegistrar {
             const initData = await initResp.json();
             const fileId = initData.fileId;
             const chunkSize = initData.chunkSize;
-            const maxParallel = initData.maxParallel || 3;
+            const maxParallelChunkUploads = initData.maxParallelChunkUploads || 3;
             const totalChunks = Math.ceil(file.size / chunkSize);
             // Active upload pool
             const pool = [];
@@ -28175,7 +28004,7 @@ class PageEventRegistrar {
                 });
                 pool.push(taskPromise);
                 // If pool is full, wait for at least one to finish
-                if (pool.length >= maxParallel) {
+                if (pool.length >= maxParallelChunkUploads) {
                     await Promise.race(pool).catch((err) => {
                         console.warn(`Pool full, but one task failed, err: ${err}`);
                     }); // don't block other tasks
@@ -28251,6 +28080,28 @@ class PageEventRegistrar {
             }
         }
     }
+    async retrieveConfig() {
+        try {
+            const response = await fetch(`/config`);
+            if (response.ok) {
+                const serverConfigJson = await response.json();
+                return {
+                    response: serverConfigJson
+                };
+            }
+            return {
+                "error": `Could not retrieve config: ${response.status}`
+            };
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.error(`Could not retrieve config: ${errorMessage}`);
+            return {
+                error: `Failed to retrieve config: ${errorMessage}`,
+                errorObject: error,
+            };
+        }
+    }
 }
 
 
@@ -28701,6 +28552,229 @@ class PageEventRegistrar {
 })));
 
 
+/***/ }),
+
+/***/ 5792:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+/* provided dependency */ var $ = __webpack_require__(4692);
+/* provided dependency */ var jQuery = __webpack_require__(4692);
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ProgressHandler = void 0;
+const socket_io_client_1 = __webpack_require__(8007);
+const progress_utils_1 = __webpack_require__(3037);
+const moment_1 = __importDefault(__webpack_require__(5093));
+const pretty_bytes_1 = __importDefault(__webpack_require__(281));
+const _progressDivCache = new Map();
+const stateColorMap = {
+    COMPLETE: "is-success",
+    FAILED: "is-danger",
+};
+class ProgressHandler {
+    addToDomCache(progressId, $panel) {
+        _progressDivCache.set(progressId, $panel);
+        this.updateCollapseAllVisibility();
+    }
+    getFromDomCache(progressId) {
+        return _progressDivCache.get(progressId);
+    }
+    domCacheSize() {
+        return _progressDivCache.size;
+    }
+    registerHandler() {
+        console.log("Registering Progress Handler...");
+        const socket = (0, socket_io_client_1.io)();
+        socket.emit("message", "Connected.");
+        socket.on("progresses", (progresses) => {
+            this.handleProgresses(progresses);
+        });
+        this.registerAllDetailToggleEventHandler();
+        console.log("Progress handler registration complete.");
+    }
+    updateCollapseAllVisibility() {
+        const $control = $(".all-progress-detail-control");
+        if (this.domCacheSize() > 0) {
+            $control.removeClass("is-hidden");
+        }
+        else {
+            $control.addClass("is-hidden");
+        }
+        const $parentElem = jQuery(".single-progress-container");
+        const $btn = jQuery(".all-progress-detail-control button");
+        const $progressDetailElems = $parentElem
+            .find("[id^='progressTableContainer-']");
+        const $hiddenProgressDetailElems = $parentElem
+            .find("[id^='progressTableContainer-'].is-hidden");
+        const allHidden = $hiddenProgressDetailElems.length === $progressDetailElems.length;
+        const buttonLabel = allHidden ? "Expand All" : "Collapse All";
+        $btn.text(buttonLabel);
+    }
+    registerAllDetailToggleEventHandler() {
+        const $btn = jQuery(".all-progress-detail-control button");
+        $btn.on("click", () => {
+            const collapseAll = $btn.text().trim() === "Collapse All";
+            const newLabel = collapseAll ? "Expand All" : "Collapse All";
+            $btn.text(newLabel);
+            // Loop through every progress panel
+            jQuery(".single-progress-container").each((_, panel) => {
+                const $panel = jQuery(panel);
+                const $toggle = $panel.find(".progress-detail-control");
+                const $icon = $toggle.find("i");
+                // table container selector
+                const panelId = $panel.attr("id");
+                const tableContainerId = `progressTableContainer-${panelId}`;
+                const $tableContainer = jQuery(`#${tableContainerId}`);
+                if (collapseAll) {
+                    // collapse everything
+                    $toggle.removeClass("is-active");
+                    $tableContainer.addClass("is-hidden");
+                    $icon.removeClass("fa-minus-circle").addClass("fa-plus-circle")
+                        .attr("title", "expand");
+                }
+                else {
+                    // expand everything
+                    $toggle.addClass("is-active");
+                    $tableContainer.removeClass("is-hidden");
+                    $icon.removeClass("fa-plus-circle").addClass("fa-minus-circle")
+                        .attr("title", "collapse");
+                }
+            });
+        });
+    }
+    registerDetailToggleEventHandler($panel, tableContainerId) {
+        $panel.on("click", ".progress-detail-control", (event) => {
+            const $btn = jQuery(event.currentTarget);
+            const $tableContainer = jQuery(`#${tableContainerId}`);
+            // toggle active class
+            const isActive = $btn.toggleClass("is-active").hasClass("is-active");
+            // toggle content visibility
+            if (isActive) {
+                $tableContainer.removeClass("is-hidden");
+            }
+            else {
+                $tableContainer.addClass("is-hidden");
+            }
+            // toggle icon
+            const $icon = $btn.find("i");
+            if (isActive) {
+                // expanded → show minus
+                $icon.removeClass("fa-plus-circle").addClass("fa-minus-circle");
+                $icon.attr("title", "collapse");
+            }
+            else {
+                // collapsed → show plus
+                $icon.removeClass("fa-minus-circle").addClass("fa-plus-circle");
+                $icon.attr("title", "expand");
+            }
+            // no need for _this alias
+            this.updateCollapseAllVisibility();
+        });
+    }
+    handleProgresses(progresses) {
+        const $progressContainer = jQuery("div#progress-container");
+        progresses.forEach(progress => {
+            const progressId = `progress-${progress.uuid}`;
+            const uploaded = progress.uploadedChunks?.length ?? 0;
+            const uploading = progress.uploadingChunks?.length ?? 0;
+            const totalChunks = progress.totalChunks ?? 1;
+            const colorKey = progress.lastState;
+            const stateColor = stateColorMap[colorKey] || "";
+            // Container box
+            let $panel = this.getFromDomCache(progressId);
+            const tableContainerId = `progressTableContainer-${progressId}`;
+            if (!$panel) {
+                $panel = jQuery(`<article id="${progressId}" class="progress-panel panel is-bordered single-progress-container mb-4"></article>`);
+                $progressContainer.prepend($panel);
+                this.addToDomCache(progressId, $panel);
+                this.registerDetailToggleEventHandler($panel, tableContainerId);
+            }
+            // Remove existing progress colors
+            $panel.removeClass("is-success is-danger is-info is-warning");
+            $panel.addClass(stateColor || "is-info");
+            // Add file name as a heading above the table
+            const panelHeadingId = `panelHeading-${progressId}`;
+            let $panelHeading = $panel.find(`#${panelHeadingId}`);
+            if (!$panelHeading.length) {
+                $panelHeading = jQuery(`<div id="${panelHeadingId}" class="panel-heading wrap-text is-flex-wrap-wrap p-2 has-text-weight-normal is-size-6 mb-1">
+                    <a class="progress-detail-control is-active ml-1 mr-1">
+                        <span class="panel-icon m-0 p-0">
+                          <i class="fas fa-minus-circle m-0 p-0" aria-hidden="true" title="collapse"></i>
+                        </span>
+                    </a>
+                    <span class="upload-file-name ml-0 pl-0">
+                        ${progress.fileName}
+                    </span>
+                </div>`);
+                $panel.append($panelHeading);
+            }
+            $panelHeading.find(".upload-file-name").text(progress.fileName || "");
+            // Main progress bar (bytes)
+            let $progressElem = $panel.find(`progress#${progressId}`);
+            if (!$progressElem.length) {
+                $progressElem = jQuery(`<progress id="${progressId}" class="progress is-info is-small">`);
+                $panel.append($progressElem);
+            }
+            $progressElem.attr("max", (progress.bytesExpected || 100));
+            $progressElem.attr("value", (progress.bytesReceived || 0));
+            // Remove existing progress colors
+            $progressElem.removeClass("is-success is-danger is-info is-warning");
+            $progressElem.addClass(stateColor || "is-info");
+            let $tableContainer = $panel.find(`#${tableContainerId}`);
+            if (!$tableContainer.length) {
+                $tableContainer = jQuery(`<div id="${tableContainerId}" class="panel-block table-container m-0 p-0"></div>`);
+                $panel.append($tableContainer);
+            }
+            const tableId = `progressTable-${progressId}`;
+            let $table = $tableContainer.find(`#${tableId}`);
+            if (!$table.length) {
+                $table = jQuery(`<table id="${tableId}" class="table is-fullwidth is-bordered is-striped"></table>`);
+                $tableContainer.append($table);
+            }
+            // Clear previous rows
+            $table.empty();
+            let progressPercent = 0;
+            if (progress.bytesReceived !== undefined && progress.bytesExpected !== undefined) {
+                progressPercent = (progress.bytesReceived / progress.bytesExpected) * 100;
+            }
+            // Define table rows
+            const rows = [
+                // ["File Name", progress.fileName || "-"],
+                // ["Location", progress.savedLocation || "-"],
+                ["Started", (0, moment_1.default)(progress.timestamp).format("MMMM Do YYYY, h:mm:ss a")],
+                ["Transferred", `${(0, pretty_bytes_1.default)(progress.bytesReceived || 0)} / ${(0, pretty_bytes_1.default)(progress.bytesExpected || 0)}`],
+                ["Chunks", `Verified ${progress.chunkVerificationCount || 0} 
+                    <b>|</b> Uploading: ${uploading} 
+                    <b>|</b> Uploaded: ${uploaded}/${totalChunks}`],
+                ["Speed", `${(0, pretty_bytes_1.default)(progress_utils_1.ProgressUtils.calculateTransferRate(progress))}/s`],
+                ["Status", `${progress.lastState || "-"}`],
+                ["Progress", `${progressPercent.toFixed(2)}%`],
+            ];
+            if (progress.completed) {
+                const timeTaken = ((progress.completed - (progress.timestamp || 0)) / 1000).toFixed(2);
+                rows.push(["Completed in", `${timeTaken} sec`]);
+            }
+            // Append rows
+            for (const [key, value] of rows) {
+                $table.append(`<tr><th class="is-narrow">${key}</th><td>${value}</td></tr>`);
+            }
+            const horizontalRulerId = `horizontalRuler-${progressId}`;
+            let $horizontalRuler = $panel.find(`#${horizontalRulerId}`);
+            if (!$horizontalRuler.length) {
+                $horizontalRuler = jQuery(`<hr id="${horizontalRulerId}" class="is-one-third mt-3 mb-1">`);
+                $panel.append($horizontalRuler);
+            }
+            this.updateCollapseAllVisibility();
+        });
+    }
+}
+exports.ProgressHandler = ProgressHandler;
+
+
 /***/ }),
 
 /***/ 5802:
@@ -39556,7 +39630,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__(5600);
+/******/ 	var __webpack_exports__ = __webpack_require__(5668);
 /******/ 	
 /******/ })()
 ;