@leogps/file-uploader 2.0.0

package/src-client/entrypoint.ts

@@ -0,0 +1,273 @@
+import { ProgressHandler } from "./progress-handler";
+import "jquery-blockui/jquery.blockUI.js";
+import "./style.scss";
+import Toastify from "toastify-js";
+import {computeSHA1} from "./sha1";
+
+const MAX_COMPLETE_CHECK_RETRIES = 20;
+const COMPLETE_CHECK_RETRY_DELAY_MS = 1000;
+
+jQuery(() => {
+    const progressHandler = new ProgressHandler();
+    progressHandler.registerHandler();
+
+    const pageEventRegistrar = new PageEventRegistrar();
+    pageEventRegistrar.registerEvents();
+});
+
+class PageEventRegistrar {
+    public registerEvents(): void {
+        this.registerThemeSelectionEventHandler();
+        this.registerFileInputEventHandler();
+        this.registerFormSubmissionEventHandler();
+    }
+
+    private registerThemeSelectionEventHandler() {
+        const $themeToggle = $('#themeToggle');
+        const $themeIcon = $('#themeIcon');
+        const $htmlEl = $('html');
+
+        const applyTheme = (theme: string) => {
+            $htmlEl.attr('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            $themeIcon.removeClass('fa-sun fa-moon');
+            $themeIcon.addClass(theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon');
+        };
+
+        // Detect saved theme or system preference
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            applyTheme(savedTheme);
+        } else {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            applyTheme(prefersDark ? 'dark' : 'light');
+        }
+
+        // Toggle on click
+        $themeToggle.on('click', () => {
+            const currentTheme = $htmlEl.attr('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            applyTheme(newTheme);
+        });
+    }
+
+    private registerFileInputEventHandler() {
+        const $fileDiv = jQuery("#file-div");
+        const $fileNameDiv = $fileDiv.find("#file-name");
+        const $fileInput = jQuery("form#uploadForm input[name='multipleFiles']");
+        $fileInput.on("change", () => {
+            this.onFilesChange($fileNameDiv, $fileInput);
+        });
+    }
+
+    private onFilesChange($fileNameDiv: JQuery<HTMLElement>, $fileInput: JQuery<HTMLElement>) {
+        $fileNameDiv.html("");
+        const files: FileList = $fileInput.prop("files");
+        if (files && files.length > 0) {
+            const ul = document.createElement("ul");
+            for (const file of Array.from(files)) {
+                const li = document.createElement("li");
+                li.textContent = file.name;
+                ul.appendChild(li);
+            }
+            $fileNameDiv.append(ul);
+        } else {
+            $fileNameDiv.html("No files selected.");
+        }
+    }
+
+    private registerFormSubmissionEventHandler() {
+        const $uploadForm = jQuery("form#uploadForm");
+        $uploadForm.on("submit", (event) => {
+            event.preventDefault();
+
+            // wrap async logic in an IIFE
+            (async () => {
+                const formElement: any = $('input[name="multipleFiles"]')[0];
+                const files: FileList = formElement.files;
+
+                if (!files || files.length === 0) {
+                    Toastify({
+                        text: "Please select files",
+                        duration: 3000,
+                        close: true
+                    }).showToast();
+                    return;
+                }
+
+                // 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)) {
+                        await this.uploadFile(file);
+                    }
+                } 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='multipleFiles']");
+                    this.onFilesChange($fileNameDiv, $fileInput);
+
+                    $uploadForm.unblock();
+                }
+            })().catch(err => {
+                console.error("Error during upload:", err);
+                Toastify({
+                    text: `Upload error: ${err}`,
+                    duration: -1,
+                    close: true,
+                    style: { background: "linear-gradient(to right, #F39454, #FF6600)" }
+                }).showToast();
+            });
+        });
+    }
+
+    private async uploadFile(file: File): Promise<void> {
+        try {
+            // Initialize upload
+            const initResp = await fetch("/upload/init", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ fileName: file.name, fileSize: file.size })
+            });
+            const initData = await initResp.json();
+            const fileId: string = initData.fileId;
+            const chunkSize: number = initData.chunkSize;
+            const maxParallel: number = initData.maxParallel || 3;
+            const totalChunks: number = Math.ceil(file.size / chunkSize);
+
+            // Active upload pool
+            const pool: Promise<void>[] = [];
+
+            // Function to handle one chunk
+            const uploadChunkTask = async (chunkIndex: number) => {
+                const start = chunkIndex * chunkSize;
+                const end = Math.min(start + chunkSize, file.size);
+                const chunk = file.slice(start, end);
+
+                // Compute SHA-1 for just this chunk
+                const chunkHash = await computeSHA1(chunk);
+
+                // Check if chunk already exists on server
+                const statusResp = await fetch(
+                    `/upload/status?fileId=${fileId}&chunkIndex=${chunkIndex}&chunkSize=${chunkSize}&hash=${chunkHash}`
+                );
+                const statusData = await statusResp.json();
+                console.log(`chunk-status for index ${chunkIndex}: hash-matches? ${statusData.hashMatches}`);
+
+                if (statusData.hashMatches) {
+                    // already uploaded
+                    return;
+                }
+
+                // Upload chunk
+                const formData = new FormData();
+                formData.append("chunk", chunk, file.name);
+                await this.uploadChunk(fileId, chunkIndex, chunkHash, formData);
+            };
+
+            // Loop through chunks and dynamically manage pool
+            for (let i = 0; i < totalChunks; i++) {
+                const taskPromise: Promise<void> = uploadChunkTask(i)
+                    .finally(() => {
+                        const index = pool.indexOf(taskPromise);
+                        if (index > -1) {
+                            // remove finished task
+                            pool.splice(index, 1);
+                        }
+                    })
+                    .catch(err => {
+                        console.error(`Chunk ${i} failed:`, err);
+                        throw err;
+                    });
+
+                pool.push(taskPromise);
+
+                // If pool is full, wait for at least one to finish
+                if (pool.length >= maxParallel) {
+                    await Promise.race(pool).catch((err) => {
+                        console.warn(`Pool full, but one task failed, err: ${err}`);
+                    }); // don't block other tasks
+                }
+            }
+
+            // Wait for remaining chunks
+            await Promise.all(pool);
+
+            // Complete upload
+            let completeData: any = null;
+            let markUploadFailed = false;
+            for (let attempt = 1; attempt <= MAX_COMPLETE_CHECK_RETRIES; attempt++) {
+                markUploadFailed = attempt === MAX_COMPLETE_CHECK_RETRIES;
+                if (markUploadFailed) {
+                    console.warn(`Marking upload as failed after ${attempt} retries...`);
+                }
+                const completeResp = await fetch(`/upload/complete?fileId=${fileId}&markUploadFailed=${markUploadFailed}`,
+                {
+                    method: "POST"
+                });
+                completeData = await completeResp.json();
+
+                if (completeResp.ok && completeData.msg !== 'File incomplete') {
+                    // Upload is confirmed complete
+                    break;
+                }
+
+                console.log(`Attempt ${attempt}: file still incomplete, retrying in ${COMPLETE_CHECK_RETRY_DELAY_MS}ms...`);
+                await new Promise(res => setTimeout(res, COMPLETE_CHECK_RETRY_DELAY_MS));
+            }
+
+            if (!completeData || completeData.msg === 'File incomplete') {
+                Toastify({
+                    text: `Upload failed: file incomplete after ${MAX_COMPLETE_CHECK_RETRIES} retries`,
+                    duration: -1,
+                    close: true,
+                    style: { background: "linear-gradient(to right, #F39454, #FF6600)" }
+                }).showToast();
+            } else {
+                Toastify({
+                    text: `Upload complete: ${file.name}, saved to: ${completeData.savedLocation}`,
+                    duration: -1,
+                    close: true,
+                    style: { background: "linear-gradient(to right, #00b09b, #96c93d)" }
+                }).showToast();
+            }
+
+        } catch (err: any) {
+            console.error(`Error uploading file ${file.name}:`, err);
+            Toastify({
+                text: `Error uploading file ${file.name}, ${err}`,
+                duration: -1,
+                close: true,
+                style: { background: "linear-gradient(to right, #F39454, #FF6600)" }
+            }).showToast();
+        }
+    }
+
+    private async uploadChunk(fileId: string, chunkIndex: number, hash: string, formData: FormData) {
+        let uploaded = false;
+        while (!uploaded) {
+            try {
+                const chunkResp = await fetch(`/upload/chunk?fileId=${fileId}&chunkIndex=${chunkIndex}&hash=${hash}`, {
+                    method: "POST",
+                    body: formData
+                });
+                if (chunkResp.ok) {
+                    uploaded = true;
+                } else {
+                    console.warn(`Retrying chunk ${chunkIndex}...`);
+                    await new Promise(res => setTimeout(res, 500));
+                }
+            } catch (err) {
+                console.error(`Chunk ${chunkIndex} upload error:`, err);
+                await new Promise(res => setTimeout(res, 500));
+            }
+        }
+    }
+}

package/src-client/progress-handler.ts

@@ -0,0 +1,233 @@
+import { io } from "socket.io-client";
+import {FileTransferProgress} from "../src/model/progress";
+import { ProgressUtils } from "../src/model/progress_utils";
+import moment from "moment";
+import prettyBytes from "pretty-bytes";
+
+const _progressDivCache: Map<string, JQuery<HTMLElement>> = new Map();
+const stateColorMap: Record<"COMPLETE" | "FAILED", string> = {
+    COMPLETE: "is-success",
+    FAILED: "is-danger",
+};
+
+export class ProgressHandler {
+
+    private addToDomCache(progressId: string, $panel: JQuery):void {
+        _progressDivCache.set(progressId, $panel);
+        this.updateCollapseAllVisibility();
+    }
+
+    private getFromDomCache(progressId: string): JQuery | undefined {
+        return _progressDivCache.get(progressId);
+    }
+
+    private domCacheSize(): number {
+        return _progressDivCache.size;
+    }
+
+    public registerHandler(): void {
+        console.log("Registering Progress Handler...");
+        const socket = io();
+        socket.emit("message", "Connected.");
+
+        socket.on("progresses", (progresses: FileTransferProgress[]) => {
+            this.handleProgresses(progresses);
+        });
+
+        this.registerAllDetailToggleEventHandler();
+        console.log("Progress handler registration complete.");
+    }
+
+    private updateCollapseAllVisibility(): void {
+        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);
+    }
+
+    private registerAllDetailToggleEventHandler(): void {
+        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");
+                }
+            });
+        });
+    }
+
+    private registerDetailToggleEventHandler($panel: JQuery, tableContainerId: string) {
+        $panel.on("click", ".progress-detail-control", (event) => {
+            const $btn = jQuery(event.currentTarget);
+
+            const $tableContainer = jQuery(`#${tableContainerId}`);
+
+            // toggle active class
+            const isActive: boolean = $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();
+        });
+    }
+
+    private handleProgresses(progresses: FileTransferProgress[]): void {
+        const $progressContainer = jQuery("div#progress-container");
+
+        progresses.forEach(progress => {
+            const progressId = `progress-${progress.uuid}`;
+            const uploaded = (progress.uploadedChunks as any)?.length ?? 0;
+            const uploading = (progress.uploadingChunks as any)?.length ?? 0;
+            const totalChunks = progress.totalChunks ?? 1;
+
+            const colorKey = progress.lastState as keyof typeof stateColorMap;
+            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="ml-0 pl-0">
+                        ${progress.fileName}
+                    </span>
+                </div>`);
+                $panel.append($panelHeading);
+            }
+
+            // 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();
+
+            // Define table rows
+            const rows: [string, string][] = [
+                // ["File Name", progress.fileName || "-"],
+                // ["Location", progress.savedLocation || "-"],
+                ["Started", moment(progress.timestamp).format("MMMM Do YYYY, h:mm:ss a")],
+                ["Transferred", `${prettyBytes(progress.bytesReceived || 0)} / ${prettyBytes(progress.bytesExpected || 0)}`],
+                ["Chunks", `Verified ${progress.chunkVerificationCount || 0} 
+                    <b>|</b> Uploading: ${uploading} 
+                    <b>|</b> Uploaded: ${uploaded}/${totalChunks}`],
+                ["Speed", `${prettyBytes(ProgressUtils.calculateTransferRate(progress))}/s`],
+                ["Status", `${progress.lastState || "-"}`],
+            ];
+
+            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();
+        });
+    }
+}

package/src-client/public/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>File Uploader!</title>
+
+</head>
+<body>
+  <div class="content m-2">
+      <div class="fixed-grid container has-4-columns mt-4">
+          <div class="grid">
+              <div class="cell is-col-span-2">
+                  <section>
+                      <div>
+                          Hello there from file-uploader server.
+                      </div>
+                      <div>
+                          <code class="">File Uploader,</code> you know for file uploads.
+                      </div>
+                  </section>
+              </div>
+              <div class="cell is-col-from-end-1">
+                  <section class="mt-4 m-2 is-pulled-right mr-6">
+                      <div class="is-position-absolute bulma-is-fixed-top is-clickable" id="themeToggle">
+                          <i class="fas fa-moon" id="themeIcon"></i>
+                      </div>
+                  </section>
+              </div>
+          </div>
+      </div>
+    <div class="container is-one-third">
+      <form id="uploadForm" action="/upload" enctype="multipart/form-data" method="post">
+        <div id="file-div" class="field file has-name is-boxed column is-flex-grow-1">
+          <label class="file-label">
+            <input class="file-input" type="file" name="multipleFiles" multiple="multiple">
+            <span class="file-cta">
+              <span class="file-icon">
+                <i class="fas fa-upload"></i>
+              </span>
+              <span class="file-label">
+                Choose file(s)…
+              </span>
+            </span>
+          </label>
+          <div id="file-name" class="mt-1 wrap-text is-multiline"></div>
+        </div>
+
+        <div class="control field is-flex-grow-1">
+          <button type="submit" class="button is-link">Submit</button>
+        </div>
+      </form>
+    </div>
+
+      <hr class="is-one-third"/>
+      <div class="container">
+          <section class="m-2 is-one-third">
+              <h4>Progress:</h4>
+              <div class="all-progress-detail-control control field is-flex-grow-1 is-active p-1 is-hidden">
+                  <button type="button" class="button is-link">Collapse All</button>
+              </div>
+              <div class="container" id="progress-container"></div>
+          </section>
+      </div>
+  </div>
+</body>
+</html>

package/src-client/sha1.ts

@@ -0,0 +1,19 @@
+import { sha1 } from "js-sha1";
+
+export const computeSHA1 = async (blob: Blob): Promise<string> => {
+    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 sha1(bytes);
+};

package/src-client/style.scss

@@ -0,0 +1,87 @@
+@import "bulma/css/bulma.min.css";
+@import "bulma/sass/themes/light";
+@import "bulma/sass/themes/dark";
+@import "toastify-js/src/toastify.css";
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+
+:root {
+  --file-item-hover-bg: rgba(0, 0, 0, 0.05); // light theme default
+  --file-item-border-color: #9e9e9e;
+  --file-item-icon-color: #9e9e9e;
+
+  --upload-block-modal-bg: #ffffff;
+}
+
+[data-theme="dark"] {
+  --file-item-hover-bg: rgba(255, 255, 255, 0.1); // dark theme
+  --file-item-border-color: #6e6e6e;
+  --file-item-icon-color: #b0b0b0;
+
+  --upload-block-modal-bg: #1e1e1e;
+}
+
+h1.upload-block-modal {
+ background-color: var(--upload-block-modal-bg);
+}
+
+#file-name.wrap-text {
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+#file-name ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 1rem;
+}
+
+#file-name li {
+  position: relative;
+  padding-left: 1.5em;
+  margin-bottom: 0.25em;
+  border-bottom: 1px solid var(--file-item-border-color);
+  transition: background-color 0.2s ease;
+}
+
+#file-name li:first-child {
+  border-top: 1px solid var(--file-item-border-color);
+}
+
+#file-name li:hover {
+  background-color: var(--file-item-hover-bg);
+  cursor: pointer;
+}
+
+#file-name li::before {
+  content: "\f15b";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 0;
+  color: var(--file-item-icon-color);
+}
+
+.progress-panel {
+  box-shadow: none;
+}
+
+.panel-heading.wrap-text {
+  border-radius: 5px 5px 0 0;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.progress.is-small {
+  height: 0.25rem;
+  margin-bottom: 0;
+}
+
+.panel-heading a.progress-detail-control .panel-icon {
+  vertical-align: middle;
+}
+
+.panel-heading a.progress-detail-control .fas {
+  color: blue;
+}