Implement upload progress tracking with speed and progress bar

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

.gitignore

@@ -1,7 +1,3 @@
 target/
 data/
 .idea/
-ui_src/dist/
-ui_src/node_modules/
-ui_src/package-lock.json
-ui_src/*.tsbuildinfo

Cargo.lock

@@ -3323,7 +3323,6 @@ dependencies = [
  "sqlx",
  "tokio",
  "tokio-util",
- "url",
  "uuid",
  "walkdir",
 ]

Cargo.toml

@@ -36,14 +36,13 @@ sha2 = "0.10.8"
 sqlx = { version = "0.8.1", features = ["mysql", "runtime-tokio", "chrono", "uuid"] }
 config = { version = "0.15.7", features = ["yaml"] }
 chrono = { version = "0.4.38", features = ["serde"] }
-reqwest = { version = "0.12.8", features = ["stream", "http2", "json"] }
+reqwest = { version = "0.12.8", features = ["stream", "http2"] }
 clap = { version = "4.5.18", features = ["derive"] }
 mime2ext = "0.1.53"
 infer = "0.19.0"
 tokio-util = { version = "0.7.13", features = ["io", "io-util"] }
 http-range-header = { version = "0.4.2" }
 base58 = "0.2.0"
-url = "2.5.0"
 
 libc = { version = "0.2.153", optional = true }
 ffmpeg-rs-raw = { git = "https://git.v0l.io/Kieran/ffmpeg-rs-raw.git", rev = "aa1ce3edcad0fcd286d39b3e0c2fdc610c3988e7", optional = true }

index.html

@@ -66,7 +66,13 @@
                 const file = input.files[0];
                 console.debug(file);
 
+                const r_nip96 = document.querySelector("#method-nip96").checked;
+                const r_blossom = document.querySelector("#method-blossom").checked;
+                if (r_nip96) {
+                    await uploadFilesNip96(file)
+                } else if (r_blossom) {
                     await uploadBlossom(file);
+                }
             } catch (ex) {
                 if (ex instanceof Error) {
                     alert(ex.message);
@@ -141,7 +147,16 @@
     Welcome to route96
 </h1>
 <div class="flex flex-col gap-2">
-
+    <div>
+        <label>
+            NIP-96
+            <input type="radio" name="method" id="method-nip96"/>
+        </label>
+        <label>
+            Blossom
+            <input type="radio" name="method" id="method-blossom"/>
+        </label>
+    </div>
     <div style="color: #ff8383;">
         You must have a nostr extension for this to work
     </div>
@@ -149,7 +164,7 @@
     <div>
         <input type="checkbox" id="no_transform">
         <label for="no_transform">
-            Disable compression (videos and images)
+            Disable compression (images)
         </label>
     </div>
     <div>

src/routes/admin.rs

@@ -12,7 +12,7 @@ pub fn admin_routes() -> Vec<Route> {
         admin_list_files,
         admin_get_self,
         admin_list_reports,
-        admin_acknowledge_report,
+        admin_acknowledge_report
     ]
 }
 

src/routes/blossom.rs

@@ -15,9 +15,8 @@ use rocket::{routes, Data, Request, Response, Route, State};
 use serde::{Deserialize, Serialize};
 use tokio::io::AsyncRead;
 use tokio_util::io::StreamReader;
-use url::Url;
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize)]
 #[serde(crate = "rocket::serde")]
 pub struct BlobDescriptor {
     pub url: String,
@@ -226,25 +225,15 @@ async fn mirror(
     settings: &State<Settings>,
     req: Json<MirrorRequest>,
 ) -> BlossomResponse {
-    if !check_method(&auth.event, "upload") {
+    if !check_method(&auth.event, "mirror") {
         return BlossomResponse::error("Invalid request method tag");
     }
     if let Some(e) = check_whitelist(&auth, settings) {
         return e;
     }
 
-    let url = match Url::parse(&req.url) {
-        Ok(u) => u,
-        Err(e) => return BlossomResponse::error(format!("Invalid URL: {}", e)),
-    };
-
-    let hash = url
-        .path_segments()
-        .and_then(|mut c| c.next_back())
-        .and_then(|s| s.split(".").next());
-
     // download file
-    let rsp = match reqwest::get(url.clone()).await {
+    let rsp = match reqwest::get(&req.url).await {
         Err(e) => {
             error!("Error downloading file: {}", e);
             return BlossomResponse::error("Failed to mirror file");
@@ -261,10 +250,9 @@ async fn mirror(
     let pubkey = auth.event.pubkey.to_bytes().to_vec();
 
     process_stream(
-        StreamReader::new(
+        StreamReader::new(rsp.bytes_stream().map(|result| {
-            rsp.bytes_stream()
+            result.map_err(std::io::Error::other)
-                .map(|result| result.map_err(std::io::Error::other)),
+        })),
-        ),
         &mime_type,
         &None,
         &pubkey,
@@ -273,7 +261,6 @@ async fn mirror(
         fs,
         db,
         settings,
-        hash.and_then(|h| hex::decode(h).ok()),
     )
     .await
 }
@@ -380,11 +367,15 @@ async fn process_upload(
     // check quota (only if payments are configured)
     #[cfg(feature = "payments")]
     if let Some(payment_config) = &settings.payments {
-        let free_quota = payment_config.free_quota_bytes.unwrap_or(104857600); // Default to 100MB
+        let free_quota = payment_config.free_quota_bytes
+            .unwrap_or(104857600); // Default to 100MB
         let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
 
         if size > 0 {
-            match db.check_user_quota(&pubkey_vec, size, free_quota).await {
+            match db
+                .check_user_quota(&pubkey_vec, size, free_quota)
+                .await
+            {
                 Ok(false) => return BlossomResponse::error("Upload would exceed quota"),
                 Err(_) => return BlossomResponse::error("Failed to check quota"),
                 Ok(true) => {} // Quota check passed
@@ -404,7 +395,6 @@ async fn process_upload(
         fs,
         db,
         settings,
-        None,
     )
     .await
 }
@@ -419,7 +409,6 @@ async fn process_stream<'p, S>(
     fs: &State<FileStore>,
     db: &State<Database>,
     settings: &State<Settings>,
-    expect_hash: Option<Vec<u8>>,
 ) -> BlossomResponse
 where
     S: AsyncRead + Unpin + 'p,
@@ -428,15 +417,6 @@ where
         Ok(FileSystemResult::NewFile(blob)) => {
             let mut ret: FileUpload = (&blob).into();
 
-            // check expected hash (mirroring)
-            if let Some(h) = expect_hash {
-                if h != ret.id {
-                    if let Err(e) = tokio::fs::remove_file(fs.get(&ret.id)).await {
-                        log::warn!("Failed to cleanup file: {}", e);
-                    }
-                    return BlossomResponse::error("Mirror request failed, server responses with invalid file content (hash mismatch)");
-                }
-            }
             // update file data before inserting
             ret.name = name.map(|s| s.to_string());
 
@@ -463,7 +443,8 @@ where
     #[cfg(feature = "payments")]
     if size == 0 {
         if let Some(payment_config) = &settings.payments {
-            let free_quota = payment_config.free_quota_bytes.unwrap_or(104857600); // Default to 100MB
+            let free_quota = payment_config.free_quota_bytes
+                .unwrap_or(104857600); // Default to 100MB
             
             match db.check_user_quota(pubkey, upload.size, free_quota).await {
                 Ok(false) => {

ui_src/src/App.tsx

@@ -7,7 +7,7 @@ function App() {
   return (
     <Router>
       <div className="min-h-screen bg-gray-900">
-        <div className="max-lg:px-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <Header />
           <main className="py-8">
             <Routes>

ui_src/src/components/mirror-suggestions.tsx

@@ -1,370 +0,0 @@
-import { useState, useEffect } from "react";
-import { Blossom } from "../upload/blossom";
-import { FormatBytes } from "../const";
-import Button from "./button";
-import usePublisher from "../hooks/publisher";
-import useLogin from "../hooks/login";
-
-interface FileMirrorSuggestion {
-  sha256: string;
-  url: string;
-  size: number;
-  mime_type?: string;
-  available_on: string[];
-  missing_from: string[];
-}
-
-interface MirrorSuggestionsProps {
-  servers: string[];
-}
-
-interface MirrorProgress {
-  total: number;
-  completed: number;
-  failed: number;
-  errors: string[];
-}
-
-export default function MirrorSuggestions({ servers }: MirrorSuggestionsProps) {
-  const [suggestions, setSuggestions] = useState<FileMirrorSuggestion[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string>();
-  const [mirrorAllProgress, setMirrorAllProgress] = useState<MirrorProgress | null>(null);
-
-  const pub = usePublisher();
-  const login = useLogin();
-
-  useEffect(() => {
-    if (servers.length > 1 && pub && login?.pubkey) {
-      fetchSuggestions();
-    }
-  }, [servers, pub, login?.pubkey]);
-
-  async function fetchSuggestions() {
-    if (!pub || !login?.pubkey) return;
-
-    try {
-      setLoading(true);
-      setError(undefined);
-
-      // Capture the servers list at the start to avoid race conditions
-      const serverList = [...servers];
-
-      if (serverList.length <= 1) {
-        setLoading(false);
-        return;
-      }
-
-      const fileMap: Map<string, FileMirrorSuggestion> = new Map();
-
-      // Fetch files from each server
-      for (const serverUrl of serverList) {
-        try {
-          const blossom = new Blossom(serverUrl, pub);
-          const files = await blossom.list(login.pubkey);
-
-          for (const file of files) {
-            const suggestion = fileMap.get(file.sha256);
-            if (suggestion) {
-              suggestion.available_on.push(serverUrl);
-            } else {
-              fileMap.set(file.sha256, {
-                sha256: file.sha256,
-                url: file.url || "",
-                size: file.size,
-                mime_type: file.type,
-                available_on: [serverUrl],
-                missing_from: [],
-              });
-            }
-          }
-        } catch (e) {
-          console.error(`Failed to fetch files from ${serverUrl}:`, e);
-          // Continue with other servers instead of failing completely
-        }
-      }
-
-      // Determine missing servers for each file using the captured server list
-      for (const suggestion of fileMap.values()) {
-        for (const serverUrl of serverList) {
-          if (!suggestion.available_on.includes(serverUrl)) {
-            suggestion.missing_from.push(serverUrl);
-          }
-        }
-      }
-
-      // Filter to only files that are missing from at least one server and available on at least one
-      const filteredSuggestions = Array.from(fileMap.values()).filter(
-        s => s.missing_from.length > 0 && s.available_on.length > 0
-      );
-
-      setSuggestions(filteredSuggestions);
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(e.message);
-      } else {
-        setError("Failed to fetch mirror suggestions");
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function mirrorAll() {
-    if (!pub || suggestions.length === 0) return;
-
-    // Calculate total operations needed
-    const totalOperations = suggestions.reduce((total, suggestion) =>
-      total + suggestion.missing_from.length, 0
-    );
-
-    setMirrorAllProgress({
-      total: totalOperations,
-      completed: 0,
-      failed: 0,
-      errors: []
-    });
-
-    let completed = 0;
-    let failed = 0;
-    const errors: string[] = [];
-
-    // Mirror all files to all missing servers
-    for (const suggestion of suggestions) {
-      for (const targetServer of suggestion.missing_from) {
-        try {
-          const blossom = new Blossom(targetServer, pub);
-          await blossom.mirror(suggestion.url);
-          completed++;
-
-          setMirrorAllProgress(prev => prev ? {
-            ...prev,
-            completed: completed,
-            failed: failed
-          } : null);
-
-          // Update suggestions in real-time
-          setSuggestions(prev =>
-            prev.map(s =>
-              s.sha256 === suggestion.sha256
-                ? {
-                  ...s,
-                  available_on: [...s.available_on, targetServer],
-                  missing_from: s.missing_from.filter(server => server !== targetServer)
-                }
-                : s
-            ).filter(s => s.missing_from.length > 0)
-          );
-        } catch (e) {
-          failed++;
-          const errorMessage = e instanceof Error ? e.message : "Unknown error";
-          const serverHost = new URL(targetServer).hostname;
-          errors.push(`${serverHost}: ${errorMessage}`);
-
-          setMirrorAllProgress(prev => prev ? {
-            ...prev,
-            completed: completed,
-            failed: failed,
-            errors: [...errors]
-          } : null);
-        }
-      }
-    }
-
-    // Keep progress visible for a moment before clearing
-    setTimeout(() => {
-      setMirrorAllProgress(null);
-    }, 3000);
-  }
-
-  // Calculate coverage statistics
-  const totalFiles = suggestions.length;
-  const totalMirrorOperations = suggestions.reduce((total, suggestion) =>
-    total + suggestion.missing_from.length, 0
-  );
-  const totalSize = suggestions.reduce((total, suggestion) => total + suggestion.size, 0);
-
-  // Calculate coverage per server
-  const serverCoverage = servers.map(serverUrl => {
-    const filesOnServer = suggestions.filter(s => s.available_on.includes(serverUrl)).length;
-    const totalFilesAcrossAllServers = new Set(suggestions.map(s => s.sha256)).size;
-    const coveragePercentage = totalFilesAcrossAllServers > 0 ?
-      Math.round((filesOnServer / totalFilesAcrossAllServers) * 100) : 100;
-
-    return {
-      url: serverUrl,
-      hostname: new URL(serverUrl).hostname,
-      filesCount: filesOnServer,
-      totalFiles: totalFilesAcrossAllServers,
-      coveragePercentage
-    };
-  });
-
-  if (servers.length <= 1) {
-    return null; // No suggestions needed for single server
-  }
-
-  if (loading) {
-    return (
-      <div className="card">
-        <h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
-        <p className="text-gray-400">Loading mirror suggestions...</p>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="card">
-        <h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
-        <div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg mb-4">
-          {error}
-        </div>
-        <Button onClick={fetchSuggestions} className="btn-secondary">
-          Retry
-        </Button>
-      </div>
-    );
-  }
-
-  if (suggestions.length === 0) {
-    return (
-      <div className="card">
-        <h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
-        <p className="text-gray-400">All your files are synchronized across all servers.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="card">
-      <h3 className="text-lg font-semibold mb-4">Mirror Coverage</h3>
-
-      {/* Coverage Summary */}
-      <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6">
-        <div className="grid grid-cols-3 gap-4 text-center">
-          <div>
-            <div className="text-2xl font-bold text-blue-400">{totalFiles}</div>
-            <div className="text-xs text-gray-400">Files to Mirror</div>
-          </div>
-          <div>
-            <div className="text-2xl font-bold text-orange-400">{totalMirrorOperations}</div>
-            <div className="text-xs text-gray-400">Operations Needed</div>
-          </div>
-          <div>
-            <div className="text-2xl font-bold text-green-400">{FormatBytes(totalSize)}</div>
-            <div className="text-xs text-gray-400">Total Size</div>
-          </div>
-        </div>
-      </div>
-
-      {/* Server Coverage */}
-      <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6">
-        <h4 className="text-sm font-semibold text-gray-300 mb-3">Coverage by Server</h4>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-          {serverCoverage.map((server) => (
-            <div key={server.url} className="bg-gray-750 border border-gray-600 rounded-lg p-3">
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm font-medium text-gray-300 truncate">
-                  {server.hostname}
-                </span>
-                <span
-                  className={`text-sm font-semibold ${server.coveragePercentage === 100
-                      ? "text-green-400"
-                      : server.coveragePercentage >= 80
-                        ? "text-yellow-400"
-                        : "text-red-400"
-                    }`}
-                >
-                  {server.coveragePercentage}%
-                </span>
-              </div>
-              <div className="w-full bg-gray-700 rounded-full h-2 mb-2">
-                <div
-                  className={`h-2 rounded-full transition-all duration-300 ${server.coveragePercentage === 100
-                      ? "bg-green-500"
-                      : server.coveragePercentage >= 80
-                        ? "bg-yellow-500"
-                        : "bg-red-500"
-                    }`}
-                  style={{
-                    width: `${server.coveragePercentage}%`,
-                  }}
-                ></div>
-              </div>
-              <div className="text-xs text-gray-400 text-center">
-                {server.filesCount} / {server.totalFiles} files
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Mirror All Section */}
-      {!mirrorAllProgress ? (
-        <div className="text-center">
-          <p className="text-gray-400 mb-4">
-            {totalFiles} files need to be synchronized across your servers
-          </p>
-          <Button
-            onClick={mirrorAll}
-            className="btn-primary"
-            disabled={totalMirrorOperations === 0}
-          >
-            Mirror Everything
-          </Button>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {/* Progress Bar */}
-          <div>
-            <div className="flex justify-between text-sm mb-2">
-              <span className="text-gray-400">Progress</span>
-              <span className="text-gray-400">
-                {mirrorAllProgress.completed + mirrorAllProgress.failed} / {mirrorAllProgress.total}
-              </span>
-            </div>
-            <div className="w-full bg-gray-700 rounded-full h-2">
-              <div
-                className="bg-blue-500 h-2 rounded-full transition-all duration-300"
-                style={{
-                  width: `${((mirrorAllProgress.completed + mirrorAllProgress.failed) / mirrorAllProgress.total) * 100}%`
-                }}
-              />
-            </div>
-          </div>
-
-          {/* Status Summary */}
-          <div className="grid grid-cols-3 gap-4 text-center text-sm">
-            <div>
-              <div className="text-green-400 font-semibold">{mirrorAllProgress.completed}</div>
-              <div className="text-gray-400">Completed</div>
-            </div>
-            <div>
-              <div className="text-red-400 font-semibold">{mirrorAllProgress.failed}</div>
-              <div className="text-gray-400">Failed</div>
-            </div>
-            <div>
-              <div className="text-gray-400 font-semibold">
-                {mirrorAllProgress.total - mirrorAllProgress.completed - mirrorAllProgress.failed}
-              </div>
-              <div className="text-gray-400">Remaining</div>
-            </div>
-          </div>
-
-          {/* Errors */}
-          {mirrorAllProgress.errors.length > 0 && (
-            <div className="bg-red-900/20 border border-red-800 rounded-lg p-3">
-              <h4 className="text-red-400 font-semibold mb-2">Errors ({mirrorAllProgress.errors.length})</h4>
-              <div className="space-y-1 max-h-32 overflow-y-auto">
-                {mirrorAllProgress.errors.map((error, index) => (
-                  <div key={index} className="text-red-300 text-xs">{error}</div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

ui_src/src/const.ts

@@ -43,6 +43,3 @@ export function FormatBytes(b: number, f?: number) {
   if (b >= kiB) return (b / kiB).toFixed(f) + " KiB";
   return b.toFixed(f) + " B";
 }
-
-export const ServerUrl =
-    import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;

ui_src/src/hooks/use-blossom-servers.ts

@@ -1,25 +0,0 @@
-import useLogin from "./login";
-import { useRequestBuilder } from "@snort/system-react";
-import { EventKind, RequestBuilder } from "@snort/system";
-import { dedupe, removeUndefined, sanitizeRelayUrl } from "@snort/shared";
-import { ServerUrl } from "../const";
-
-const DefaultMediaServers = ["https://blossom.band/", "https://blossom.primal.net", ServerUrl]
-
-export function useBlossomServers() {
-  const login = useLogin();
-
-  const rb = new RequestBuilder("media-servers");
-  if (login?.pubkey) {
-    rb.withFilter()
-      .kinds([10_063 as EventKind])
-      .authors([login.pubkey]);
-  }
-  const req = useRequestBuilder(rb);
-
-  const servers = req === undefined ? undefined :
-    req
-      .flatMap((e) => e.tags.filter(t => t[0] === "server")
-        .map((t) => t[1]));
-  return dedupe(removeUndefined([...DefaultMediaServers, ...(servers ?? [])].map(sanitizeRelayUrl)));
-}

ui_src/src/upload/blossom.ts

@@ -65,7 +65,7 @@ export class Blossom {
     const rsp = await this.#req(
       "mirror",
       "PUT",
-      "upload",
+      "mirror",
       JSON.stringify({ url }),
       undefined,
       {

ui_src/src/upload/index.ts

@@ -3,7 +3,6 @@ export async function openFile(): Promise<File | undefined> {
     const elm = document.createElement("input");
     let lock = false;
     elm.type = "file";
-    elm.multiple = true; // Allow multiple file selection
     const handleInput = (e: Event) => {
       lock = true;
       const elm = e.target as HTMLInputElement;
@@ -29,35 +28,3 @@ export async function openFile(): Promise<File | undefined> {
     );
   });
 }
-
-export async function openFiles(): Promise<FileList | undefined> {
-  return new Promise((resolve) => {
-    const elm = document.createElement("input");
-    let lock = false;
-    elm.type = "file";
-    elm.multiple = true;
-    const handleInput = (e: Event) => {
-      lock = true;
-      const elm = e.target as HTMLInputElement;
-      if ((elm.files?.length ?? 0) > 0) {
-        resolve(elm.files!);
-      } else {
-        resolve(undefined);
-      }
-    };
-
-    elm.onchange = (e) => handleInput(e);
-    elm.click();
-    window.addEventListener(
-      "focus",
-      () => {
-        setTimeout(() => {
-          if (!lock) {
-            resolve(undefined);
-          }
-        }, 300);
-      },
-      { once: true },
-    );
-  });
-}

ui_src/src/views/header.tsx

@@ -43,7 +43,7 @@ export default function Header() {
 
   return (
     <header className="border-b border-gray-700 bg-gray-800 w-full">
-      <div className="px-4 flex justify-between items-center py-4">
+      <div className="px-4 sm:px-6 lg:px-8 flex justify-between items-center py-4">
         <div className="flex items-center space-x-8">
           <Link to="/">
             <div className="text-2xl font-bold text-gray-100 hover:text-blue-400 transition-colors">

ui_src/src/views/upload.tsx

@@ -3,41 +3,36 @@ import Button from "../components/button";
 import FileList from "./files";
 import PaymentFlow from "../components/payment";
 import ProgressBar from "../components/progress-bar";
-import MirrorSuggestions from "../components/mirror-suggestions";
+import { openFile } from "../upload";
-import { useBlossomServers } from "../hooks/use-blossom-servers";
+import { Blossom } from "../upload/blossom";
-import { openFiles } from "../upload";
-import { Blossom, BlobDescriptor } from "../upload/blossom";
 import useLogin from "../hooks/login";
 import usePublisher from "../hooks/publisher";
 import { Nip96, Nip96FileList } from "../upload/nip96";
 import { AdminSelf, Route96 } from "../upload/admin";
-import { FormatBytes, ServerUrl } from "../const";
+import { FormatBytes } from "../const";
 import { UploadProgress } from "../upload/progress";
 
 export default function Upload() {
-  const [stripMetadata, setStripMetadata] = useState(true);
+  const [type, setType] = useState<"blossom" | "nip96">("blossom");
+  const [noCompress, setNoCompress] = useState(false);
+  const [toUpload, setToUpload] = useState<File>();
   const [self, setSelf] = useState<AdminSelf>();
   const [error, setError] = useState<string>();
-  const [results, setResults] = useState<Array<BlobDescriptor>>([]);
+  const [results, setResults] = useState<Array<object>>([]);
   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 blossomServers = useBlossomServers();
-
   const login = useLogin();
   const pub = usePublisher();
 
-  // Check if file should have compression enabled by default
+  const url =
-  const shouldCompress = (file: File) => {
+    import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
-    return file.type.startsWith('video/') || file.type.startsWith('image/');
+  async function doUpload() {
-  };
-
-  async function doUpload(file: File) {
     if (!pub) return;
-    if (!file) return;
+    if (!toUpload) return;
     if (isUploading) return; // Prevent multiple uploads
 
     try {
@@ -49,13 +44,19 @@ export default function Upload() {
         setUploadProgress(progress);
       };
 
-      const uploader = new Blossom(ServerUrl, pub);
+      if (type === "blossom") {
-      // Use compression for video and image files when metadata stripping is enabled
+        const uploader = new Blossom(url, pub);
-      const useCompression = shouldCompress(file) && stripMetadata;
+        const result = noCompress
-      const result = useCompression
+          ? await uploader.upload(toUpload, onProgress)
-        ? await uploader.media(file, onProgress)
+          : await uploader.media(toUpload, onProgress);
-        : await uploader.upload(file, onProgress);
         setResults((s) => [...s, result]);
+      }
+      if (type === "nip96") {
+        const uploader = new Nip96(url, pub);
+        await uploader.loadInfo();
+        const result = await uploader.upload(toUpload, onProgress);
+        setResults((s) => [...s, result]);
+      }
     } catch (e) {
       if (e instanceof Error) {
         setError(e.message || "Upload failed - no error details provided");
@@ -70,33 +71,12 @@ export default function Upload() {
     }
   }
 
-  async function handleFileSelection() {
-    if (isUploading) return;
-
-    try {
-      const files = await openFiles();
-      if (!files || files.length === 0) return;
-
-      // Start uploading each file immediately
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-        await doUpload(file);
-      }
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(e.message || "File selection failed");
-      } else {
-        setError("File selection failed");
-      }
-    }
-  }
-
   const listUploads = useCallback(
     async (n: number) => {
       if (!pub) return;
       try {
         setError(undefined);
-        const uploader = new Nip96(ServerUrl, pub);
+        const uploader = new Nip96(url, pub);
         await uploader.loadInfo();
         const result = await uploader.listFiles(n, 50);
         setListedFiles(result);
@@ -112,14 +92,14 @@ export default function Upload() {
         }
       }
     },
-    [pub],
+    [pub, url],
   );
 
   async function deleteFile(id: string) {
     if (!pub) return;
     try {
       setError(undefined);
-      const uploader = new Blossom(ServerUrl, pub);
+      const uploader = new Blossom(url, pub);
       await uploader.delete(id);
     } catch (e) {
       if (e instanceof Error) {
@@ -140,10 +120,10 @@ export default function Upload() {
 
   useEffect(() => {
     if (pub && !self) {
-      const r96 = new Route96(ServerUrl, pub);
+      const r96 = new Route96(url, pub);
       r96.getSelf().then((v) => setSelf(v.data));
     }
-  }, [pub, self]);
+  }, [pub, self, url]);
 
   if (!login) {
     return (
@@ -159,57 +139,103 @@ export default function Upload() {
   }
 
   return (
-    <div className="w-full px-4">
+    <div className="max-w-4xl mx-auto space-y-8">
       {error && (
-        <div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg mb-6">
+        <div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
           {error}
         </div>
       )}
 
-      <div className="flex flex-wrap gap-6">
+      <div className="card">
-        {/* Upload Widget */}
+        <h2 className="text-xl font-semibold mb-6">Upload Settings</h2>
-        <div className="card flex-1 min-w-80">
-          <h2 className="text-xl font-semibold mb-6">Upload Files</h2>
 
         <div className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3">
+              Upload Method
+            </label>
+            <div className="flex gap-6">
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  checked={type === "blossom"}
+                  onChange={() => setType("blossom")}
+                  className="mr-2"
+                />
+                <span className="text-sm font-medium text-gray-300">
+                  Blossom
+                </span>
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  checked={type === "nip96"}
+                  onChange={() => setType("nip96")}
+                  className="mr-2"
+                />
+                <span className="text-sm font-medium text-gray-300">
+                  NIP-96
+                </span>
+              </label>
+            </div>
+          </div>
+
           <div>
             <label className="flex items-center cursor-pointer">
               <input
                 type="checkbox"
-                  checked={stripMetadata}
+                checked={noCompress}
-                  onChange={(e) => setStripMetadata(e.target.checked)}
+                onChange={(e) => setNoCompress(e.target.checked)}
                 className="mr-2"
               />
               <span className="text-sm font-medium text-gray-300">
-                  Strip metadata (for images)
+                Disable Compression
               </span>
             </label>
           </div>
 
+          {toUpload && (
+            <div className="border-2 border-dashed border-gray-600 rounded-lg p-4">
+              <FileList files={[toUpload]} />
+            </div>
+          )}
+
           {/* Upload Progress */}
           {isUploading && uploadProgress && (
             <ProgressBar 
               progress={uploadProgress} 
+              fileName={toUpload?.name}
             />
           )}
 
           <div className="flex gap-4">
             <Button
-                onClick={handleFileSelection}
+              onClick={async () => {
-                className="btn-primary flex-1"
+                const f = await openFile();
+                setToUpload(f);
+              }}
+              className="btn-secondary flex-1"
               disabled={isUploading}
             >
-                {isUploading ? "Uploading..." : "Select Files to Upload"}
+              Choose File
+            </Button>
+            <Button
+              onClick={doUpload}
+              disabled={!toUpload || isUploading}
+              className="btn-primary flex-1"
+            >
+              {isUploading ? "Uploading..." : "Upload"}
             </Button>
           </div>
         </div>
       </div>
 
-        {/* Storage Usage Widget */}
       {self && (
-          <div className="card flex-1 min-w-80">
+        <div className="card max-w-2xl mx-auto">
-            <h3 className="text-lg font-semibold mb-4">Storage Usage</h3>
+          <h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
           <div className="space-y-4">
+            {self.total_available_quota && self.total_available_quota > 0 && (
+              <>
                 {/* File Count */}
                 <div className="flex justify-between text-sm">
                   <span>Files:</span>
@@ -218,21 +244,10 @@ export default function Upload() {
                   </span>
                 </div>
 
-              {/* Total Usage */}
-              <div className="flex justify-between text-sm">
-                <span>Total Size:</span>
-                <span className="font-medium">
-                  {FormatBytes(self.total_size)}
-                </span>
-              </div>
-
-              {/* Only show quota information if available */}
-              {self.total_available_quota && self.total_available_quota > 0 && (
-                <>
                 {/* Progress Bar */}
                 <div className="space-y-2">
                   <div className="flex justify-between text-sm">
-                      <span>Quota Used:</span>
+                    <span>Used:</span>
                     <span className="font-medium">
                       {FormatBytes(self.total_size)} of{" "}
                       {FormatBytes(self.total_available_quota)}
@@ -240,7 +255,8 @@ export default function Upload() {
                   </div>
                   <div className="w-full bg-gray-700 rounded-full h-2.5">
                     <div
-                        className={`h-2.5 rounded-full transition-all duration-300 ${self.total_size / self.total_available_quota > 0.8
+                      className={`h-2.5 rounded-full transition-all duration-300 ${
+                        self.total_size / self.total_available_quota > 0.8
                           ? "bg-red-500"
                           : self.total_size / self.total_available_quota > 0.6
                             ? "bg-yellow-500"
@@ -260,7 +276,8 @@ export default function Upload() {
                       % used
                     </span>
                     <span
-                        className={`${self.total_size / self.total_available_quota > 0.8
+                      className={`${
+                        self.total_size / self.total_available_quota > 0.8
                           ? "text-red-400"
                           : self.total_size / self.total_available_quota > 0.6
                             ? "text-yellow-400"
@@ -278,8 +295,16 @@ export default function Upload() {
                   </div>
                 </div>
 
-                  {/* Quota Breakdown - excluding free quota */}
+                {/* Quota Breakdown */}
                 <div className="space-y-2 pt-2 border-t border-gray-700">
+                  {self.free_quota && self.free_quota > 0 && (
+                    <div className="flex justify-between text-sm">
+                      <span>Free Quota:</span>
+                      <span className="font-medium">
+                        {FormatBytes(self.free_quota)}
+                      </span>
+                    </div>
+                  )}
                   {(self.quota ?? 0) > 0 && (
                     <div className="flex justify-between text-sm">
                       <span>Paid Quota:</span>
@@ -317,6 +342,16 @@ export default function Upload() {
                 </div>
               </>
             )}
+
+            {(!self.total_available_quota ||
+              self.total_available_quota === 0) && (
+              <div className="text-center py-4 text-gray-400">
+                <p>No quota information available</p>
+                <p className="text-sm">
+                  Contact administrator for storage access
+                </p>
+              </div>
+            )}
           </div>
           <Button
             onClick={() => setShowPaymentFlow(!showPaymentFlow)}
@@ -327,11 +362,10 @@ export default function Upload() {
         </div>
       )}
 
-        {/* Payment Flow Widget */}
       {showPaymentFlow && pub && (
-          <div className="card flex-1 min-w-80">
+        <div className="card">
           <PaymentFlow
-              route96={new Route96(ServerUrl, pub)}
+            route96={new Route96(url, pub)}
             onPaymentRequested={(pr) => {
               console.log("Payment requested:", pr);
             }}
@@ -340,17 +374,7 @@ export default function Upload() {
         </div>
       )}
 
-        {/* Mirror Suggestions Widget */}
+      <div className="card">
-        {blossomServers && blossomServers.length > 1 && (
-          <div className="w-full">
-            <MirrorSuggestions
-              servers={blossomServers}
-            />
-          </div>
-        )}
-
-        {/* Files Widget */}
-        <div className="card w-full">
         <div className="flex justify-between items-center mb-6">
           <h2 className="text-xl font-semibold">Your Files</h2>
           {!listedFiles && (
@@ -374,12 +398,11 @@ export default function Upload() {
         )}
       </div>
 
-        {/* Upload Results Widget */}
       {results.length > 0 && (
-          <div className="card w-full">
+        <div className="card">
           <h3 className="text-lg font-semibold mb-4">Upload Results</h3>
           <div className="space-y-4">
-              {results.map((result, index) => (
+            {results.map((result: any, index) => (
               <div
                 key={index}
                 className="bg-gray-800 border border-gray-700 rounded-lg p-4"
@@ -409,10 +432,21 @@ export default function Upload() {
                       {FormatBytes(result.size || 0)}
                     </p>
                   </div>
+                  {result.nip94?.find((tag: any[]) => tag[0] === "dim") && (
+                    <div>
+                      <p className="text-sm text-gray-400">Dimensions</p>
+                      <p className="font-medium">
+                        {
+                          result.nip94.find(
+                            (tag: any[]) => tag[0] === "dim",
+                          )?.[1]
+                        }
+                      </p>
+                    </div>
+                  )}
                 </div>
 
                 <div className="space-y-2">
-                    {result.url && (
                   <div>
                     <p className="text-sm text-gray-400 mb-1">File URL</p>
                     <div className="flex items-center gap-2">
@@ -421,7 +455,7 @@ export default function Upload() {
                       </code>
                       <button
                         onClick={() =>
-                              navigator.clipboard.writeText(result.url!)
+                          navigator.clipboard.writeText(result.url)
                         }
                         className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
                         title="Copy URL"
@@ -430,6 +464,35 @@ export default function Upload() {
                       </button>
                     </div>
                   </div>
+
+                  {result.nip94?.find((tag: any[]) => tag[0] === "thumb") && (
+                    <div>
+                      <p className="text-sm text-gray-400 mb-1">
+                        Thumbnail URL
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <code className="text-xs bg-gray-900 text-blue-400 px-2 py-1 rounded flex-1 overflow-hidden">
+                          {
+                            result.nip94.find(
+                              (tag: any[]) => tag[0] === "thumb",
+                            )?.[1]
+                          }
+                        </code>
+                        <button
+                          onClick={() =>
+                            navigator.clipboard.writeText(
+                              result.nip94.find(
+                                (tag: any[]) => tag[0] === "thumb",
+                              )?.[1],
+                            )
+                          }
+                          className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
+                          title="Copy Thumbnail URL"
+                        >
+                          Copy
+                        </button>
+                      </div>
+                    </div>
                   )}
 
                   <div>
@@ -456,6 +519,5 @@ export default function Upload() {
         </div>
       )}
     </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/mirror-suggestions.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/components/progress-bar.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/hooks/use-blossom-servers.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"}
+{"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"}