npm - @leogps/file-uploader - Versions diffs - 2.0.1 → 2.0.2 - Mend

@leogps/file-uploader 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +16 -5
package/dist/client/index.html +1 -1
package/dist/client/{main.66a16cbe5e2ce036e9a7.bundle.js → main.cb411c3ff6063891b944.bundle.js} +67 -12
package/dist/index.js +1 -1
package/dist/index.js.LICENSE.txt +23 -0
package/package.json +5 -2
package/src/globals.ts +22 -3
package/src/index.ts +60 -14
package/src/model/progress.ts +1 -0
package/src/model/progress_utils.ts +32 -11
package/src/routes/upload.ts +116 -0
package/src/routes/uploadComplete.ts +3 -3
package/src/routes/uploadInit.ts +9 -4
package/src/service/progress_writer.ts +39 -12
package/src-client/entrypoint.ts +40 -4
package/src-client/progress-handler.ts +7 -1
package/src-client/public/index.html +10 -1

package/README.md CHANGED Viewed

@@ -4,6 +4,13 @@ Zero-config command-line tool to run a file-uploader server. Files can be upload
 Both Server and Client are written in JS.
+## 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
 ## Installation
 #### Running on-demand:
@@ -40,11 +47,15 @@ with the provided Dockerfile.
     file-uploader [path] [options]
-    --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]
+    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]
 # Development

package/dist/client/index.html CHANGED Viewed

	@@ -1 +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>
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.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} RENAMED Viewed

@@ -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