@leogps/file-uploader 2.0.0 → 2.0.2

package/.github/workflows/publish.yml

@@ -0,0 +1,31 @@
+name: Publish NPM
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci --include=dev
+
+      - name: Build
+        run: npm run clean && npm run package
+
+      - name: Publish
+        run: npm publish

package/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:24-alpine as build
+
+WORKDIR /srv/file-uploader
+
+COPY package.json package-lock.json ./
+RUN npm ci --production
+
+COPY . .
+RUN npm run clean && npm run package
+
+FROM node:24-alpine
+WORKDIR /srv/file-uploader
+VOLUME /public
+
+COPY --from=build /srv/file-uploader/dist ./dist
+
+EXPOSE 8080
+ENTRYPOINT ["./dist/index.js", "-p", "8080", "-l", "/public"]

package/README.md

@@ -1,115 +1,67 @@
-# File-Uploader Server
+# @leogps/file-uploader
 
 Zero-config command-line tool to run a file-uploader server. Files can be uploaded typically from a browser.
 
 Both Server and Client are written in JS.
 
-## Table of Contents
+## Features
+ - Chunked/Resumable uploads
+   - Chunk size is configurable `-s | --chunk-size`
+   - Number of Parallel uploads are configurable `-n | --parallel-uploads`
+   - Uses SHA1 verification to ensure chunks are valid
+ - Optionally disable resumable uploads
 
-* [Run](#run-in-production-mode)
-  * [Clean](#clean)
-  * [Build](#build-prod)
-  * [Serve](#serve-prod)
-  * [Configuration Options](#configuration-options)
-* [Run in Development Mode](#run-in-development-mode)
-* [Complete list of commands](#complete-list-of-commands-bunnpm)
+## Installation
 
-## Run in Production Mode
+#### Running on-demand:
 
-### Clean
+Using `npx` you can run the script without installing it first:
 
-    npm run clean # or bun run clean (optional)
+    npx @leogps/file-uploader [path] [options
 
-### Build (Prod)
+#### Globally via `npm`
 
-    npm run build-prod # or bun run build-prod
+    npm install --global @leogps/file-uploader
 
-### Serve (Prod)
+#### As a dependency in your `npm` package:
 
-    node dist/ # or bun run ./dist/
+    npm install @leogps/file-uploader
 
-### Configuration Options
+#### Using Docker
 
-    --version              Show version number                            [boolean]
-    -l, --upload_location  upload location
-                            [string] [default: "/Users/username/Downloads/uploads/"]
-    -p, --port             server port                                    [number]
-        --help             Show help                                      [boolean]
+Note: a public image is not provided currently, but you can build one yourself
+with the provided Dockerfile.
 
-## Run in Development Mode
+1. Create an image
+   ```
+   docker build -t my-image .
+   ```
+2. Run a container
+   ```
+   docker run -p 8080:8080 -v "${pwd}:/public" my-image
+   ```
+   In the example above we're serving the directory `./` (working directory).
+   If you wanted to serve `./test` you'd replace `${pwd}` with `${pwd}/test`.
 
-    npm run start # or bun start
+### Usage
 
-## Complete list of commands (bun|npm)
+    file-uploader [path] [options]
 
-* `bun|npm run clean`
+    Options:
+      -l, --upload-location     upload location             [string] [default: "/Users/<username>/uploads/"]
+      -p, --port                server port                 [number] [default: 8082]
+      -s, --chunk-size          chunk size in bytes         [number] [default: 524288]
+      -n, --parallel-uploads    number of simultaneous parallel chunk uploads (per file)     [number] [default: 10]
+      -c, --enable-compression  enable gzip compression (server to client responses)         [boolean] [default: true]
+      -m, --max-file-size       maximum file size in bytes                 [number] [default: 107374182400]
+      --version                 Show version number                        [boolean]
+      --help                    Show help                                  [boolean]
 
-    ```bash
-    rimraf dist
-    ```
+# Development
 
-* `bun|npm run precompile`
+Checkout this repository locally, then:
 
-    ```bash
-    eslint -c .eslintrc.js --fix --ext .ts src src-client
-    ```
-
-* `bun|npm run compile-server`
-
-    ```bash
-    ./node_modules/webpack-cli/bin/cli.js --config webpack.config.js
-    ```
-
-* `bun|npm run compile-client-dev`
-
-    ```bash
-    ./node_modules/webpack-cli/bin/cli.js --config webpack-client.dev.js
-    ```
-
-* `bun|npm run compile-client-prod`
-
-    ```bash
-    ./node_modules/webpack-cli/bin/cli.js --config webpack-client.prod.js
-    ```
-
-* `bun|npm run compile-dev`
-
-    ```bash
-    npm run precompile && npm run compile-server && npm run compile-client-dev
-    ```
-
-* `bun|npm run build-dev`
-
-    ```bash
-    npm run compile-dev
-    ```
-
-* `bun|npm run compile-prod`
-
-    ```bash
-    npm run precompile && npm run compile-server && npm run compile-client-prod
-    ```
-
-* `bun|npm run build-prod`
-
-    ```bash
-    npm run compile-prod
-    ```
-
-* `bun|npm run dev:server`
-
-    ```bash
-    npm run build:server:once && npm-run-all --parallel nodemon:prod watch:client
-    ```
-
-* `bun|npm run start`
-
-    ```bash
-    npm run build-dev && node dist/index.js
-    ```
-
-* `bun|npm run package`
-
-    ```bash
-    cross-env NODE_ENV=production npm run build-prod && node ./package-gzip.js
-    ```
+```sh
+$ npm i
+$ npm start
+```

package/dist/client/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>File Uploader!</title><link rel="icon" href="favicon.ico"><script defer="defer" src="main.66a16cbe5e2ce036e9a7.bundle.js"></script><link href="main.6db272040eaab1c51019.css" rel="stylesheet"></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>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>File Uploader!</title><link rel="icon" href="favicon.ico"><script defer="defer" src="main.cb411c3ff6063891b944.bundle.js"></script><link href="main.6db272040eaab1c51019.css" rel="stylesheet"></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="file" 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="field"><label class="checkbox"><input id="disableChunkedUpload" type="checkbox"> <span>Disable chunked/resumable upload</span></label></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/dist/client/{main.66a16cbe5e2ce036e9a7.bundle.js → main.cb411c3ff6063891b944.bundle.js}

@@ -6250,12 +6250,13 @@ class ProgressHandler {
                           <i class="fas fa-minus-circle m-0 p-0" aria-hidden="true" title="collapse"></i>
                         </span>
                     </a>
-                    <span class="ml-0 pl-0">
+                    <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) {
@@ -6280,6 +6281,10 @@ class ProgressHandler {
             }
             // 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 || "-"],
@@ -6291,6 +6296,7 @@ class ProgressHandler {
                     <b>|</b> Uploaded: ${uploaded}/${totalChunks}`],
                 ["Speed", `${(0, pretty_bytes_1.default)(progress_utils_1.ProgressUtils.calculateTransferRate(progress))}/s`],
                 ["Status", `${progress.lastState || "-"}`],
+                ["Progress", `${progressPercent}%`],
             ];
             if (progress.completed) {
                 const timeTaken = ((progress.completed - (progress.timestamp || 0)) / 1000).toFixed(2);
@@ -21014,15 +21020,32 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ProgressUtils = void 0;
 class ProgressUtils {
     static calculateTransferRate(progress) {
-        const transferSamples = progress.transferSamples;
-        if (!transferSamples || transferSamples.length < 2) {
+        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;
         }
-        const first = transferSamples[0];
-        const last = transferSamples[transferSamples.length - 1];
-        const dataSize = last.bytesReceived - first.bytesReceived;
-        const timeIntervalSeconds = (last.timestamp - first.timestamp) / 1000;
-        return dataSize / timeIntervalSeconds;
+        return totalBytes / (totalTimeMs / 1000);
     }
 }
 exports.ProgressUtils = ProgressUtils;
@@ -28002,7 +28025,7 @@ class PageEventRegistrar {
     registerFileInputEventHandler() {
         const $fileDiv = jQuery("#file-div");
         const $fileNameDiv = $fileDiv.find("#file-name");
-        const $fileInput = jQuery("form#uploadForm input[name='multipleFiles']");
+        const $fileInput = jQuery("form#uploadForm input[name='file']");
         $fileInput.on("change", () => {
             this.onFilesChange($fileNameDiv, $fileInput);
         });
@@ -28029,7 +28052,7 @@ class PageEventRegistrar {
             event.preventDefault();
             // wrap async logic in an IIFE
             (async () => {
-                const formElement = $('input[name="multipleFiles"]')[0];
+                const formElement = $('input[name="file"]')[0];
                 const files = formElement.files;
                 if (!files || files.length === 0) {
                     (0, toastify_js_1.default)({
@@ -28039,6 +28062,7 @@ 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>'
@@ -28046,7 +28070,12 @@ class PageEventRegistrar {
                 try {
                     // Upload all files sequentially
                     for (const file of Array.from(files)) {
-                        await this.uploadFile(file);
+                        if (disableChunked) {
+                            await this.uploadFileNonChunked(file);
+                        }
+                        else {
+                            await this.uploadFile(file);
+                        }
                     }
                 }
                 finally {
@@ -28054,7 +28083,7 @@ class PageEventRegistrar {
                     $uploadForm.trigger("reset");
                     const $fileDiv = jQuery("#file-div");
                     const $fileNameDiv = $fileDiv.find("#file-name");
-                    const $fileInput = jQuery("form#uploadForm input[name='multipleFiles']");
+                    const $fileInput = jQuery("form#uploadForm input[name='file']");
                     this.onFilesChange($fileNameDiv, $fileInput);
                     $uploadForm.unblock();
                 }
@@ -28069,6 +28098,32 @@ class PageEventRegistrar {
             });
         });
     }
+    async uploadFileNonChunked(file) {
+        const formData = new FormData();
+        // Server-side uses formidable({ multiples: true }) so using the same field name is fine
+        formData.append("file", file, file.name);
+        const resp = await fetch("/upload", {
+            method: "POST",
+            body: formData
+        });
+        let data;
+        const contentType = resp.headers.get("content-type") || "";
+        if (contentType.includes("application/json")) {
+            data = await resp.json();
+        }
+        else {
+            data = await resp.text();
+        }
+        if (!resp.ok) {
+            throw new Error(typeof data === "string" ? data : (data?.msg || "Upload failed"));
+        }
+        (0, toastify_js_1.default)({
+            text: `Upload complete: ${file.name}`,
+            duration: -1,
+            close: true,
+            style: { background: "linear-gradient(to right, #00b09b, #96c93d)" }
+        }).showToast();
+    }
     async uploadFile(file) {
         try {
             // Initialize upload