Add upload progress bar and average speed while uploading (#30)

* Initial plan for issue

* Implement upload progress tracking with speed and progress bar

Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>

ui_src/src/components/progress-bar.tsx

@@ -0,0 +1,62 @@
+import { UploadProgress, formatSpeed, formatTime } from "../upload/progress";
+import { FormatBytes } from "../const";
+
+interface ProgressBarProps {
+  progress: UploadProgress;
+  fileName?: string;
+}
+
+export default function ProgressBar({ progress, fileName }: ProgressBarProps) {
+  const {
+    percentage,
+    bytesUploaded,
+    totalBytes,
+    averageSpeed,
+    estimatedTimeRemaining,
+  } = progress;
+
+  return (
+    <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="font-medium text-blue-400">
+          {fileName ? `Uploading ${fileName}` : "Uploading..."}
+        </h4>
+        <span className="text-sm text-gray-400">
+          {percentage.toFixed(1)}%
+        </span>
+      </div>
+      
+      {/* Progress Bar */}
+      <div className="w-full bg-gray-700 rounded-full h-2.5 mb-3">
+        <div
+          className="bg-blue-500 h-2.5 rounded-full transition-all duration-300"
+          style={{ width: `${Math.min(100, percentage)}%` }}
+        />
+      </div>
+      
+      {/* Upload Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+        <div>
+          <span className="text-gray-400">Progress:</span>
+          <span className="ml-2 font-medium">
+            {FormatBytes(bytesUploaded)} / {FormatBytes(totalBytes)}
+          </span>
+        </div>
+        
+        <div>
+          <span className="text-gray-400">Speed:</span>
+          <span className="ml-2 font-medium text-green-400">
+            {formatSpeed(averageSpeed)}
+          </span>
+        </div>
+        
+        <div>
+          <span className="text-gray-400">ETA:</span>
+          <span className="ml-2 font-medium">
+            {formatTime(estimatedTimeRemaining)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

ui_src/src/upload/blossom.ts

@@ -1,6 +1,7 @@
 import { base64, bytesToString } from "@scure/base";
 import { throwIfOffline, unixNow } from "@snort/shared";
 import { EventKind, EventPublisher } from "@snort/system";
+import { UploadProgressCallback, uploadWithProgress } from "./progress";
 
 export interface BlobDescriptor {
   url?: string;
@@ -28,14 +29,14 @@ export class Blossom {
     }
   }
 
-  async upload(file: File): Promise<BlobDescriptor> {
+  async upload(file: File, onProgress?: UploadProgressCallback): Promise<BlobDescriptor> {
     const hash = await window.crypto.subtle.digest(
       "SHA-256",
       await file.arrayBuffer(),
     );
     const tags = [["x", bytesToString("hex", new Uint8Array(hash))]];
 
-    const rsp = await this.#req("upload", "PUT", "upload", file, tags);
+    const rsp = await this.#req("upload", "PUT", "upload", file, tags, undefined, onProgress);
     if (rsp.ok) {
       return (await rsp.json()) as BlobDescriptor;
     } else {
@@ -44,14 +45,14 @@ export class Blossom {
     }
   }
 
-  async media(file: File): Promise<BlobDescriptor> {
+  async media(file: File, onProgress?: UploadProgressCallback): Promise<BlobDescriptor> {
     const hash = await window.crypto.subtle.digest(
       "SHA-256",
       await file.arrayBuffer(),
     );
     const tags = [["x", bytesToString("hex", new Uint8Array(hash))]];
 
-    const rsp = await this.#req("media", "PUT", "media", file, tags);
+    const rsp = await this.#req("media", "PUT", "media", file, tags, undefined, onProgress);
     if (rsp.ok) {
       return (await rsp.json()) as BlobDescriptor;
     } else {
@@ -106,6 +107,7 @@ export class Blossom {
     body?: BodyInit,
     tags?: Array<Array<string>>,
     headers?: Record<string, string>,
+    onProgress?: UploadProgressCallback,
   ) {
     throwIfOffline();
 
@@ -126,14 +128,22 @@ export class Blossom {
       )}`;
     };
 
+    const requestHeaders = {
+      ...headers,
+      accept: "application/json",
+      authorization: await auth(url, method),
+    };
+
+    // Use progress-enabled upload for PUT requests with body
+    if (method === "PUT" && body && onProgress) {
+      return await uploadWithProgress(url, method, body, requestHeaders, onProgress);
+    }
+
+    // Fall back to regular fetch for other requests
     return await fetch(url, {
       method,
       body,
-      headers: {
+      headers: requestHeaders,
-        ...headers,
-        accept: "application/json",
-        authorization: await auth(url, method),
-      },
     });
   }
 }

ui_src/src/upload/nip96.ts

@@ -1,6 +1,7 @@
 import { base64 } from "@scure/base";
 import { throwIfOffline } from "@snort/shared";
 import { EventKind, EventPublisher, NostrEvent } from "@snort/system";
+import { UploadProgressCallback, uploadWithProgress } from "./progress";
 
 export class Nip96 {
   #info?: Nip96Info;
@@ -28,14 +29,14 @@ export class Nip96 {
     return data;
   }
 
-  async upload(file: File) {
+  async upload(file: File, onProgress?: UploadProgressCallback) {
     const fd = new FormData();
     fd.append("size", file.size.toString());
     fd.append("caption", file.name);
     fd.append("content_type", file.type);
     fd.append("file", file);
 
-    const rsp = await this.#req("", "POST", fd);
+    const rsp = await this.#req("", "POST", fd, onProgress);
     const data = await this.#handleResponse<Nip96Result>(rsp);
     if (data.status !== "success") {
       throw new Error(data.message);
@@ -57,7 +58,7 @@ export class Nip96 {
     }
   }
 
-  async #req(path: string, method: "GET" | "POST" | "DELETE", body?: BodyInit) {
+  async #req(path: string, method: "GET" | "POST" | "DELETE", body?: BodyInit, onProgress?: UploadProgressCallback) {
     throwIfOffline();
     const auth = async (url: string, method: string) => {
       const auth = await this.publisher.generic((eb) => {
@@ -77,13 +78,22 @@ export class Nip96 {
       u = `${this.url}${u.slice(1)}`;
     }
     u += path;
+
+    const requestHeaders = {
+      accept: "application/json",
+      authorization: await auth(u, method),
+    };
+
+    // Use progress-enabled upload for POST requests with FormData
+    if (method === "POST" && body && onProgress) {
+      return await uploadWithProgress(u, method, body, requestHeaders, onProgress);
+    }
+
+    // Fall back to regular fetch for other requests
     return await fetch(u, {
       method,
       body,
-      headers: {
+      headers: requestHeaders,
-        accept: "application/json",
-        authorization: await auth(u, method),
-      },
     });
   }
 }

ui_src/src/upload/progress.ts

@@ -0,0 +1,184 @@
+// Upload progress tracking types and utilities
+
+export interface UploadProgress {
+  percentage: number;
+  bytesUploaded: number;
+  totalBytes: number;
+  averageSpeed: number; // bytes per second
+  estimatedTimeRemaining: number; // seconds
+  startTime: number;
+}
+
+export interface UploadProgressCallback {
+  (progress: UploadProgress): void;
+}
+
+export class ProgressTracker {
+  private startTime: number;
+  private lastUpdateTime: number;
+  private bytesUploaded: number = 0;
+  private totalBytes: number;
+  private speedSamples: number[] = [];
+  private maxSamples = 10; // Keep last 10 speed samples for averaging
+
+  constructor(totalBytes: number) {
+    this.totalBytes = totalBytes;
+    this.startTime = Date.now();
+    this.lastUpdateTime = this.startTime;
+  }
+
+  update(bytesUploaded: number): UploadProgress {
+    const now = Date.now();
+    const timeDiff = now - this.lastUpdateTime;
+    
+    // Calculate instantaneous speed
+    if (timeDiff > 0) {
+      const bytesDiff = bytesUploaded - this.bytesUploaded;
+      const instantSpeed = (bytesDiff / timeDiff) * 1000; // bytes per second
+      
+      // Keep a rolling average of speed samples
+      this.speedSamples.push(instantSpeed);
+      if (this.speedSamples.length > this.maxSamples) {
+        this.speedSamples.shift();
+      }
+    }
+
+    this.bytesUploaded = bytesUploaded;
+    this.lastUpdateTime = now;
+
+    // Calculate average speed
+    const averageSpeed = this.speedSamples.length > 0 
+      ? this.speedSamples.reduce((sum, speed) => sum + speed, 0) / this.speedSamples.length
+      : 0;
+
+    // Calculate estimated time remaining
+    const remainingBytes = this.totalBytes - bytesUploaded;
+    const estimatedTimeRemaining = averageSpeed > 0 ? remainingBytes / averageSpeed : 0;
+
+    return {
+      percentage: (bytesUploaded / this.totalBytes) * 100,
+      bytesUploaded,
+      totalBytes: this.totalBytes,
+      averageSpeed,
+      estimatedTimeRemaining,
+      startTime: this.startTime,
+    };
+  }
+}
+
+// Utility function to format speed for display
+export function formatSpeed(bytesPerSecond: number): string {
+  if (bytesPerSecond === 0) return "0 B/s";
+  
+  const units = ["B/s", "KB/s", "MB/s", "GB/s"];
+  let value = bytesPerSecond;
+  let unitIndex = 0;
+  
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+  
+  return `${value.toFixed(1)} ${units[unitIndex]}`;
+}
+
+// Utility function to format time for display
+export function formatTime(seconds: number): string {
+  if (seconds === 0 || !isFinite(seconds)) return "--";
+  
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  
+  if (minutes > 0) {
+    return `${minutes}m ${remainingSeconds}s`;
+  } else {
+    return `${remainingSeconds}s`;
+  }
+}
+
+// XMLHttpRequest wrapper with progress tracking
+export function uploadWithProgress(
+  url: string,
+  method: string,
+  body: BodyInit | null,
+  headers: Record<string, string>,
+  onProgress?: UploadProgressCallback,
+): Promise<Response> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    
+    // Determine total size
+    let totalSize = 0;
+    if (body instanceof File) {
+      totalSize = body.size;
+    } else if (body instanceof FormData) {
+      // For FormData, we need to estimate size
+      const formData = body as FormData;
+      for (const [, value] of formData.entries()) {
+        if (value instanceof File) {
+          totalSize += value.size;
+        } else if (typeof value === 'string') {
+          totalSize += new Blob([value]).size;
+        }
+      }
+    }
+
+    const tracker = new ProgressTracker(totalSize);
+
+    // Set up progress tracking
+    if (onProgress && totalSize > 0) {
+      xhr.upload.addEventListener('progress', (event) => {
+        if (event.lengthComputable) {
+          const progress = tracker.update(event.loaded);
+          onProgress(progress);
+        }
+      });
+    }
+
+    // Set up response handling
+    xhr.addEventListener('load', () => {
+      const response = new Response(xhr.response, {
+        status: xhr.status,
+        statusText: xhr.statusText,
+        headers: parseHeaders(xhr.getAllResponseHeaders()),
+      });
+      resolve(response);
+    });
+
+    xhr.addEventListener('error', () => {
+      reject(new Error('Network error'));
+    });
+
+    xhr.addEventListener('abort', () => {
+      reject(new Error('Upload aborted'));
+    });
+
+    // Configure request
+    xhr.open(method, url);
+    
+    // Set headers
+    for (const [key, value] of Object.entries(headers)) {
+      xhr.setRequestHeader(key, value);
+    }
+
+    // Send request
+    xhr.send(body as XMLHttpRequestBodyInit | Document | null);
+  });
+}
+
+// Helper function to parse response headers
+function parseHeaders(headerString: string): Headers {
+  const headers = new Headers();
+  const lines = headerString.trim().split('\r\n');
+  
+  for (const line of lines) {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      const name = line.substring(0, colonIndex).trim();
+      const value = line.substring(colonIndex + 1).trim();
+      headers.append(name, value);
+    }
+  }
+  
+  return headers;
+}

ui_src/src/views/upload.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback } from "react";
 import Button from "../components/button";
 import FileList from "./files";
 import PaymentFlow from "../components/payment";
+import ProgressBar from "../components/progress-bar";
 import { openFile } from "../upload";
 import { Blossom } from "../upload/blossom";
 import useLogin from "../hooks/login";
@@ -9,6 +10,7 @@ import usePublisher from "../hooks/publisher";
 import { Nip96, Nip96FileList } from "../upload/nip96";
 import { AdminSelf, Route96 } from "../upload/admin";
 import { FormatBytes } from "../const";
+import { UploadProgress } from "../upload/progress";
 
 export default function Upload() {
   const [type, setType] = useState<"blossom" | "nip96">("blossom");
@@ -20,6 +22,8 @@ export default function Upload() {
   const [listedFiles, setListedFiles] = useState<Nip96FileList>();
   const [listedPage, setListedPage] = useState(0);
   const [showPaymentFlow, setShowPaymentFlow] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<UploadProgress>();
 
   const login = useLogin();
   const pub = usePublisher();
@@ -29,19 +33,28 @@ export default function Upload() {
   async function doUpload() {
     if (!pub) return;
     if (!toUpload) return;
+    if (isUploading) return; // Prevent multiple uploads
+
     try {
       setError(undefined);
+      setIsUploading(true);
+      setUploadProgress(undefined);
+
+      const onProgress = (progress: UploadProgress) => {
+        setUploadProgress(progress);
+      };
+
       if (type === "blossom") {
         const uploader = new Blossom(url, pub);
         const result = noCompress
-          ? await uploader.upload(toUpload)
+          ? await uploader.upload(toUpload, onProgress)
-          : await uploader.media(toUpload);
+          : await uploader.media(toUpload, onProgress);
         setResults((s) => [...s, result]);
       }
       if (type === "nip96") {
         const uploader = new Nip96(url, pub);
         await uploader.loadInfo();
-        const result = await uploader.upload(toUpload);
+        const result = await uploader.upload(toUpload, onProgress);
         setResults((s) => [...s, result]);
       }
     } catch (e) {
@@ -52,6 +65,9 @@ export default function Upload() {
       } else {
         setError("Upload failed");
       }
+    } finally {
+      setIsUploading(false);
+      setUploadProgress(undefined);
     }
   }
 
@@ -184,6 +200,14 @@ export default function Upload() {
             </div>
           )}
 
+          {/* Upload Progress */}
+          {isUploading && uploadProgress && (
+            <ProgressBar 
+              progress={uploadProgress} 
+              fileName={toUpload?.name}
+            />
+          )}
+
           <div className="flex gap-4">
             <Button
               onClick={async () => {
@@ -191,15 +215,16 @@ export default function Upload() {
                 setToUpload(f);
               }}
               className="btn-secondary flex-1"
+              disabled={isUploading}
             >
               Choose File
             </Button>
             <Button
               onClick={doUpload}
-              disabled={!toUpload}
+              disabled={!toUpload || isUploading}
               className="btn-primary flex-1"
             >
-              Upload
+              {isUploading ? "Uploading..." : "Upload"}
             </Button>
           </div>
         </div>

ui_src/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}
+{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/components/progress-bar.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/upload/progress.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}