@leogps/file-uploader 2.0.1 → 2.0.2

package/dist/index.js.LICENSE.txt

@@ -35,6 +35,23 @@ object-assign
  * MIT Licensed
  */
 
+/*!
+ * compressible
+ * Copyright(c) 2013 Jonathan Ong
+ * Copyright(c) 2014 Jeremiah Senkpiel
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * compression
+ * Copyright(c) 2010 Sencha Inc.
+ * Copyright(c) 2011 TJ Holowaychuk
+ * Copyright(c) 2014 Jonathan Ong
+ * Copyright(c) 2014-2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
 /*!
  * content-disposition
  * Copyright(c) 2014-2017 Douglas Christopher Wilson
@@ -183,6 +200,12 @@ object-assign
  * MIT Licensed
  */
 
+/*!
+ * on-headers
+ * Copyright(c) 2014 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
 /*!
  * parseurl
  * Copyright(c) 2014 Jonathan Ong

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leogps/file-uploader",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Facilitates file uploader server.",
   "main": "src/index.ts",
   "repository": {
@@ -52,7 +52,9 @@
   "license": "MIT",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
+    "@leogps/file-uploader": "^2.0.1",
     "bulma": "^1.0.4",
+    "compression": "^1.8.1",
     "express": "^4.18.2",
     "formidable": "^3.5.4",
     "jquery": "^3.7.1",
@@ -62,7 +64,6 @@
     "moment": "^2.29.4",
     "mv": "^2.1.1",
     "pretty-bytes": "^6.1.1",
-    "rimraf": "^5.0.5",
     "serve-favicon": "^2.5.0",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2",
@@ -71,6 +72,7 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
+    "@types/compression": "^1.8.1",
     "@types/express": "^4.17.20",
     "@types/formidable": "^3.4.6",
     "@types/jquery": "^3.5.24",
@@ -100,6 +102,7 @@
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^7.0.1",
     "prettier": "^3.7.4",
+    "rimraf": "^6.1.2",
     "sass": "^1.94.2",
     "sass-loader": "^13.3.3",
     "style-loader": "^3.3.1",

package/src/globals.ts

@@ -2,9 +2,13 @@ import { Progress } from './model/progress';
 import { ProgressWriter } from './service/progress_writer';
 import _ from "lodash";
 
-export const MAX_CHUNK_SIZE = 2 * 1024 * 1024;
-export const MAX_PARALLEL_CHUNK_UPLOADS = 10;
-export let uploadsDir: string;
+let uploadChunkSize = 512 * 1024;
+let maxParallelChunkUploads = 10;
+let uploadsDir: string;
+let enableCompression = true;
+let serverPort = 8082;
+let maxFileSize = 100 * 1024 * 1024 * 1024; // 100Gb
+
 export const progresses: Progress[] = [];
 export const uploadsProgressMap: Map<string, Progress> = new Map();
 let progressWriter: ProgressWriter;
@@ -13,6 +17,21 @@ export const throttleWaitTimeInMillis = 250;
 export const setUploadsDir = (dir: string) => { uploadsDir = dir; };
 export const getUploadsDir = () => uploadsDir;
 
+export const setUploadChunkSize = (size: number) => { uploadChunkSize = size; };
+export const getUploadChunkSize = () => uploadChunkSize;
+
+export const setMaxParallelChunkUploads = (count: number) => { maxParallelChunkUploads = count; };
+export const getMaxParallelChunkUploads = () => maxParallelChunkUploads;
+
+export const setEnableCompression = (enable: boolean) => { enableCompression = enable; };
+export const getEnableCompression = () => enableCompression;
+
+export const setServerPort = (port: number) => { serverPort = port; };
+export const getServerPort = () => serverPort;
+
+export const setMaxFileSize = (size: number) => { maxFileSize = size; };
+export const getMaxFileSize = () => maxFileSize;
+
 export const setProgressWriter = (writer: ProgressWriter) => {
     progressWriter = writer;
 };

package/src/index.ts

@@ -1,23 +1,28 @@
-
-
 import express, { Express, Request, Response } from 'express';
+import compression from 'compression';
 import {createServer, Server} from "http"
 import {router as uploadInitRouter} from "./routes/uploadInit";
 import {router as uploadChunkRouter} from "./routes/uploadChunk";
 import {router as uploadCompleteRouter} from "./routes/uploadComplete";
 import {router as uploadStatusRouter} from "./routes/uploadStatus";
+import {router as uploadRouter} from "./routes/upload";
 import {ProgressWriter} from "./service/progress_writer";
 import * as socketio from "socket.io";
 import yargs from "yargs";
 import {hideBin} from "yargs/helpers";
 import * as os from 'os';
-import {getProgressWriter, progresses, setProgressWriter, setUploadsDir} from "./globals";
+import {
+  getEnableCompression, getMaxFileSize,
+  getMaxParallelChunkUploads, getServerPort, getUploadChunkSize,
+  progresses, setEnableCompression, setMaxFileSize,
+  setMaxParallelChunkUploads, setProgressWriter, setServerPort, setUploadChunkSize, setUploadsDir, throttledBroadcaster
+} from "./globals";
+import prettyBytes from "pretty-bytes";
 
 const homedir = os.homedir();
-let port = 8082;
-let uploadsDir = homedir + "/Downloads/uploads/"
+let uploadsDir = homedir + "/uploads/"
 const argv: any = yargs(hideBin(process.argv))
-  .option('upload_location', {
+  .option('upload-location', {
     alias: 'l',
     type: 'string',
     description: 'upload location',
@@ -26,25 +31,65 @@ const argv: any = yargs(hideBin(process.argv))
   .option('port', {
     alias: 'p',
     type: 'number',
+    default: getServerPort(),
     description: 'server port'
   })
+  .option('chunk-size', {
+    alias: 's',
+    type: 'number',
+    description: 'chunk size in bytes',
+    default: 512 * 1024
+  })
+  .option('parallel-uploads', {
+    alias: 'n',
+    type: 'number',
+    description: 'number of simultaneous parallel chunk uploads (per file)',
+    default: 10
+  })
+  .option('enable-compression', {
+    alias: 'c',
+    type: 'boolean',
+    description: 'enable gzip compression (server to client responses)',
+    default: true
+  })
+  .option('max-file-size', {
+    alias: 'm',
+    type: 'number',
+    description: 'maximum file size in bytes',
+    default: getMaxFileSize()
+  })
   .help()
   .argv
 
-if (argv.port) {
-  port = argv.port
-}
-if (argv.upload_location) {
-  uploadsDir = argv.upload_location.endsWith('/') ? argv.upload_location: argv.upload_location + '/'
+const uploadLocationArg = argv["upload-location"]
+if (uploadLocationArg) {
+  uploadsDir = uploadLocationArg.endsWith('/') ? uploadLocationArg: uploadLocationArg + '/'
 }
 setUploadsDir(uploadsDir)
+setUploadChunkSize(argv["chunk-size"])
+setMaxParallelChunkUploads(argv["parallel-uploads"])
+setEnableCompression(argv["enable-compression"])
+setServerPort(argv.port)
+setMaxFileSize(argv["max-file-size"])
+const port = getServerPort()
 
-console.log("Upload location: " + uploadsDir)
-console.log("Server port: " + port)
+console.log(`Upload location: ${uploadsDir}`)
+console.log(`Max Parallel uploads per file: ${getMaxParallelChunkUploads()}`)
+console.log(`Parallel upload chunk size: ${prettyBytes(getUploadChunkSize())}`)
+console.log(`Compression: ${getEnableCompression() ? "Enabled" : "Disabled"}`)
+console.log(`Server port: ${port}`)
 
 const app: Express = express();
 const httpServer: Server = createServer(app)
 const io: socketio.Server = new socketio.Server(httpServer);
+if (getEnableCompression()) {
+  app.use(
+      compression({
+        threshold: 10 * 1024,
+        level: 4
+      })
+  )
+}
 
 setProgressWriter(new ProgressWriter(io));
 
@@ -54,6 +99,7 @@ app.use('/upload/init', uploadInitRouter);
 app.use('/upload/chunk', uploadChunkRouter);
 app.use('/upload/complete', uploadCompleteRouter);
 app.use('/upload/status', uploadStatusRouter);
+app.use('/upload', uploadRouter);
 
 app.get('/', (_, res) => {
   res.sendFile(__dirname + '/client/index.html');
@@ -69,7 +115,7 @@ app.get('/progresses', (_: Request, res: Response) => {
 io.on('connection', (socket: socketio.Socket) => {
   console.log('a user connected');
   // socket.emit('progresses', progresses);
-  getProgressWriter().writeProgress(progresses);
+  throttledBroadcaster();
   socket.on('disconnect', () => {
     console.log('user disconnected');
   });

package/src/model/progress.ts

@@ -2,6 +2,7 @@ import prettyBytes from 'pretty-bytes'
 
 const TRANSFER_SAMPLE_FREQ = 1000; // 1second
 const MIN_SAMPLE_FREQ = TRANSFER_SAMPLE_FREQ / 4;
+export const RATE_WINDOW_MS = 6000;
 
 export enum UploadStatus {
     INITIATED = "INITIATED",

package/src/model/progress_utils.ts

@@ -1,17 +1,38 @@
 import {Progress} from './progress';
 
 export class ProgressUtils {
-    public static calculateTransferRate(progress: Progress): number {
-      const transferSamples = progress.transferSamples;
-      if (!transferSamples || transferSamples.length < 2) {
-        return 0;
-      }
-      const first = transferSamples[0];
-      const last = transferSamples[transferSamples.length - 1];
+  public static calculateTransferRate(progress: Progress): number {
+    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 dataSize = last.bytesReceived - first.bytesReceived;
-      const timeIntervalSeconds = (last.timestamp - first.timestamp) / 1000;
+      const bytes = curr.bytesReceived - prev.bytesReceived;
+      const timeMs = curr.timestamp - prev.timestamp;
 
-      return dataSize / timeIntervalSeconds;
+      if (bytes > 0 && timeMs > 0) {
+        totalBytes += bytes;
+        totalTimeMs += timeMs;
+      }
+    }
+
+    if (totalTimeMs === 0) {
+      return 0;
     }
-  }
+
+    return totalBytes / (totalTimeMs / 1000);
+  }
+}

package/src/routes/upload.ts

@@ -0,0 +1,116 @@
+import { Router } from 'express';
+import formidable, { File } from "formidable";
+import { v4 as uuidv4 } from 'uuid';
+import {
+    getMaxFileSize,
+    getUploadsDir,
+    progresses,
+    throttledBroadcaster,
+    throttleWaitTimeInMillis,
+    uploadsProgressMap
+} from "../globals";
+import {FileTransferProgress, Progress, UploadStatus} from "../model/progress";
+import _ from "lodash";
+import prettyBytes from "pretty-bytes";
+import mv from "mv";
+
+export const router = Router();
+
+router.post('/', (req: any, res: any) => {
+    const maxFileSize = getMaxFileSize();
+    const uploadsDir = getUploadsDir();
+    // parse a file upload
+    const form = formidable({
+        multiples: true,
+        maxFileSize,
+        uploadDir: uploadsDir
+    });
+    const timestamp: number = new Date().getTime();
+    const uuid = uuidv4();
+    const progress: Progress = new FileTransferProgress(uuid, timestamp);
+    uploadsProgressMap.set(uuid, progress);
+    progresses.push(progress);
+
+    const progressProcessorThrottled = _.throttle((bytesReceived, bytesExpected) => {
+        console.log("Progress: (" + bytesReceived + "/" + bytesExpected + ")");
+        if (uploadsProgressMap.has(uuid)) {
+            const existingProgress = uploadsProgressMap.get(uuid);
+            if (existingProgress) {
+                existingProgress.bytesReceived = bytesReceived;
+                existingProgress.bytesExpected = bytesExpected;
+                existingProgress.bytesReceivedPretty = prettyBytes(bytesReceived);
+                existingProgress.bytesExpectedPretty = prettyBytes(bytesExpected);
+                existingProgress.markSample();
+            }
+        } else {
+            // This can't be.
+            console.warn("Progress not found in the map for uuid: " + uuid);
+            return;
+        }
+    }, throttleWaitTimeInMillis, {
+        leading: true
+    });
+
+    form.on('progress', (bytesReceived, bytesExpected) => {
+        progressProcessorThrottled(bytesReceived, bytesExpected);
+        throttledBroadcaster();
+    });
+
+    form.on('fileBegin', (formName: string, file: File) => {
+        console.log('File Begin: ' + JSON.stringify(file));
+        if (!file.originalFilename) {
+            return;
+        }
+
+        const existingProgress = uploadsProgressMap.get(uuid);
+        console.log('File Begin progress: ' + JSON.stringify(existingProgress));
+        if (existingProgress) {
+            existingProgress.fileName = file.originalFilename;
+        }
+        console.log('File Begin progress after: ' + JSON.stringify(existingProgress));
+    });
+
+    form.on('file', (formName: string, file: File) => {
+        console.log('File received: ' + JSON.stringify(file));
+        if (file.originalFilename) {
+            console.log("file name: " + file.originalFilename);
+        } else {
+            return
+        }
+        const completed = new Date().getTime();
+        const oldPath = file.filepath;
+        const newPath = uploadsDir + file.originalFilename;
+        mv(oldPath, newPath, {mkdirp: true}, (err) => {
+            // done. it first created all the necessary directories, and then
+            // tried fs.rename, then falls back to using ncp to copy the dir
+            // to dest and then rimraf to remove the source dir
+            if (err) {
+                console.error(err);
+                return;
+            }
+            console.log("File moved to: " + newPath);
+        });
+
+        if (uploadsProgressMap.has(uuid)) {
+            const existingProgress = uploadsProgressMap.get(uuid);
+            if (existingProgress) {
+                existingProgress.savedLocation = newPath;
+                existingProgress.completed = completed
+                existingProgress.lastState = UploadStatus.COMPLETE;
+            }
+        }
+        throttledBroadcaster();
+    });
+
+    form.parse(req, (err, fields, files) => {
+        res.writeHead(200, { 'content-type': 'application/json' });
+        console.log(files);
+        const success = {
+            "msg": 'File uploaded and moved!'
+        };
+        res.write(JSON.stringify(success));
+        res.end();
+    });
+
+    return;
+});

package/src/routes/uploadComplete.ts

@@ -1,5 +1,5 @@
 import {Request, Response, Router} from 'express';
-import {getProgressWriter, progresses, uploadsProgressMap} from '../globals';
+import {throttledBroadcaster, uploadsProgressMap} from '../globals';
 import {FileTransferProgress, UploadStatus} from "../model/progress";
 
 export const router = Router();
@@ -30,7 +30,7 @@ router.post('/', (req: Request, res: Response) => {
             console.log(`Marking upload failed for file ${progress.fileName} ${progress.uuid}`);
             progress.lastState = UploadStatus.FAILED;
         }
-        getProgressWriter().writeProgress(progresses);
+        throttledBroadcaster();
         return res.status(400).json({
             msg: 'File incomplete',
             uploadedChunks: Array.from(progress.uploadedChunks),
@@ -40,7 +40,7 @@ router.post('/', (req: Request, res: Response) => {
 
     progress.completed = Date.now();
     progress.lastState = UploadStatus.COMPLETE;
-    getProgressWriter().writeProgress(progresses);
+    throttledBroadcaster();
 
     res.json({
         msg: 'File upload complete',

package/src/routes/uploadInit.ts

@@ -1,6 +1,11 @@
 import { Router, Request, Response } from 'express';
 import { v4 as uuidv4 } from 'uuid';
-import {uploadsProgressMap, progresses, getUploadsDir, MAX_PARALLEL_CHUNK_UPLOADS, MAX_CHUNK_SIZE} from '../globals';
+import {
+    uploadsProgressMap,
+    progresses,
+    getUploadsDir,
+    getUploadChunkSize, getMaxParallelChunkUploads
+} from '../globals';
 import { FileTransferProgress } from '../model/progress';
 import path from "path";
 import fs from "fs";
@@ -48,7 +53,7 @@ router.post('/', (req: Request, res: Response) => {
             progress = new FileTransferProgress(fileId, Date.now());
             progress.fileName = fileName;
             progress.bytesExpected = fileSize;
-            progress.chunkSize = 5 * 1024 * 1024;
+            progress.chunkSize = getUploadChunkSize();
             progress.totalChunks = Math.ceil(fileSize / progress.chunkSize);
             progress.bytesReceived = fs.statSync(finalPath).size; // resume
             progress.resetUploadedChunks();
@@ -63,7 +68,7 @@ router.post('/', (req: Request, res: Response) => {
         progress = new FileTransferProgress(fileId, Date.now());
         progress.fileName = fileName;
         progress.bytesExpected = fileSize;
-        progress.chunkSize = MAX_CHUNK_SIZE;
+        progress.chunkSize = getUploadChunkSize();
         progress.totalChunks = Math.ceil(fileSize / progress.chunkSize);
         progress.resetUploadedChunks();
         uploadsProgressMap.set(fileId, progress);
@@ -77,7 +82,7 @@ router.post('/', (req: Request, res: Response) => {
         fileId,
         chunkSize: progress.chunkSize,
         totalChunks: progress.totalChunks,
-        maxParallel: MAX_PARALLEL_CHUNK_UPLOADS,
+        maxParallel: getMaxParallelChunkUploads(),
         bytesReceived: progress.bytesReceived || 0 // client can skip uploaded chunks
     });
 });

package/src/service/progress_writer.ts

@@ -1,4 +1,4 @@
-import {FileTransferProgress, Progress, TransferSample} from "../model/progress";
+import {FileTransferProgress, Progress, TransferSample, RATE_WINDOW_MS} from "../model/progress";
 import { Server } from "socket.io";
 
 export class ProgressWriter {
@@ -8,24 +8,51 @@ export class ProgressWriter {
         this.io = io;
     }
 
+    private getWindowedSamples(
+        samples?: TransferSample[]
+    ): TransferSample[] {
+        if (!samples || samples.length < 2) {
+            return [];
+        }
+
+        const last = samples[samples.length - 1];
+        const windowStart = last.timestamp - RATE_WINDOW_MS;
+
+        const windowed: TransferSample[] = [];
+
+        for (let i = samples.length - 1; i >= 0; i--) {
+            const s = samples[i];
+            windowed.push(s);
+
+            if (s.timestamp <= windowStart) {
+                break;
+            }
+        }
+
+        return windowed.reverse(); // chronological order
+    }
+
     public writeProgress(progresses: Progress[]) {
         // Clone progresses to safely emit without sending full transferSamples
         const progressesEmittable: FileTransferProgress[] = progresses.map(p => p as FileTransferProgress).map(p => {
             const cloned = this.cloneObjectExceptField(p, "transferSamples") as any;
 
-            // Only include first and last sample for minimal data
-            cloned.transferSamples = [] as TransferSample[];
-            if (p.transferSamples && p.transferSamples.length >= 2) {
-                cloned.transferSamples.push(p.transferSamples[0]);
-                cloned.transferSamples.push(p.transferSamples[p.transferSamples.length - 1]);
-            }
+            // Send only sliding-window samples
+            cloned.transferSamples = this.getWindowedSamples(p.transferSamples);
 
-            // Ensure uploadedChunks, verifyingChunks, and uploadingChunks are serialized as arrays
-            cloned.uploadedChunks = p.uploadedChunks instanceof Set ? Array.from(p.uploadedChunks)
-                : Array.isArray(p.uploadedChunks) ? p.uploadedChunks : [];
+            cloned.uploadedChunks =
+                p.uploadedChunks instanceof Set
+                    ? Array.from(p.uploadedChunks)
+                    : Array.isArray(p.uploadedChunks)
+                        ? p.uploadedChunks
+                        : [];
 
-            cloned.uploadingChunks = p.uploadingChunks instanceof Set ? Array.from(p.uploadingChunks)
-                : Array.isArray(p.uploadingChunks) ? p.uploadingChunks : [];
+            cloned.uploadingChunks =
+                p.uploadingChunks instanceof Set
+                    ? Array.from(p.uploadingChunks)
+                    : Array.isArray(p.uploadingChunks)
+                        ? p.uploadingChunks
+                        : [];
 
             return cloned as FileTransferProgress;
         });

package/src-client/entrypoint.ts

@@ -54,7 +54,7 @@ class PageEventRegistrar {
     private 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);
         });
@@ -83,7 +83,7 @@ class PageEventRegistrar {
 
             // wrap async logic in an IIFE
             (async () => {
-                const formElement: any = $('input[name="multipleFiles"]')[0];
+                const formElement: any = $('input[name="file"]')[0];
                 const files: FileList = formElement.files;
 
                 if (!files || files.length === 0) {
@@ -95,6 +95,8 @@ class PageEventRegistrar {
                     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>'
@@ -103,7 +105,11 @@ 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 {
                     // Unblock and reset form after all files finish
@@ -111,7 +117,7 @@ class PageEventRegistrar {
 
                     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();
@@ -128,6 +134,36 @@ class PageEventRegistrar {
         });
     }
 
+    private async uploadFileNonChunked(file: File): Promise<void> {
+        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: any;
+        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"));
+        }
+
+        Toastify({
+            text: `Upload complete: ${file.name}`,
+            duration: -1,
+            close: true,
+            style: { background: "linear-gradient(to right, #00b09b, #96c93d)" }
+        }).showToast();
+    }
+
     private async uploadFile(file: File): Promise<void> {
         try {
             // Initialize upload

package/src-client/progress-handler.ts

@@ -161,12 +161,13 @@ export 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}`);
@@ -197,6 +198,10 @@ export 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: [string, string][] = [
                 // ["File Name", progress.fileName || "-"],
@@ -208,6 +213,7 @@ export class ProgressHandler {
                     <b>|</b> Uploaded: ${uploaded}/${totalChunks}`],
                 ["Speed", `${prettyBytes(ProgressUtils.calculateTransferRate(progress))}/s`],
                 ["Status", `${progress.lastState || "-"}`],
+                ["Progress", `${progressPercent}%`],
             ];
 
             if (progress.completed) {