From cdf8ab18fcc5afd4762a0aa271f938a43ca59fea Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Mon, 13 Apr 2026 10:25:40 +0800
Subject: [PATCH] fix: add error handling and feedback for file downloads

---
 dashboard/frontend/src/lib/api.js          | 37 ++++++++++++++--------
 dashboard/frontend/src/routes/Files.svelte | 34 ++++++++++++++++++--
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/dashboard/frontend/src/lib/api.js b/dashboard/frontend/src/lib/api.js
index faba7bc..b54f049 100644
--- a/dashboard/frontend/src/lib/api.js
+++ b/dashboard/frontend/src/lib/api.js
@@ -202,20 +202,29 @@ export async function download(path, filename) {
   const headers = {};
   if (token) headers["Authorization"] = `Bearer ${token}`;
 
-  const r = await fetch(`${BASE}/files/download?path=${encodeURIComponent(path)}`, {
-    method: "GET",
-    headers,
-  });
+  try {
+    const r = await fetch(`${BASE}/files/download?path=${encodeURIComponent(path)}`, {
+      method: "GET",
+      headers,
+    });
 
-  if (!r.ok) throw new Error(`HTTP ${r.status}`);
+    if (!r.ok) {
+      const errorText = await r.text();
+      console.error(`Download failed: ${r.status} - ${errorText}`);
+      throw new Error(`Download failed: ${r.status}`);
+    }
 
-  const blob = await r.blob();
-  const url = window.URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  window.URL.revokeObjectURL(url);
-  document.body.removeChild(a);
+    const blob = await r.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  } catch (e) {
+    console.error("Download error:", e);
+    throw e;
+  }
 }
diff --git a/dashboard/frontend/src/routes/Files.svelte b/dashboard/frontend/src/routes/Files.svelte
index f3ddd21..bb575ed 100644
--- a/dashboard/frontend/src/routes/Files.svelte
+++ b/dashboard/frontend/src/routes/Files.svelte
@@ -6,6 +6,8 @@
   let currentPath = $state("");
   let loading = $state(true);
   let uploading = $state(false);
+  let downloading = $state(false);
+  let error = $state("");
   let fileInput;
 
   async function browse(path) {
@@ -31,7 +33,16 @@
 
   async function handleDownload(name) {
     const path = currentPath ? `${currentPath}/${name}` : name;
-    await download(path, name);
+    downloading = true;
+    error = "";
+    try {
+      await download(path, name);
+    } catch (e) {
+      error = `Failed to download "${name}": ${e.message}`;
+      console.error("Download failed:", e);
+    } finally {
+      downloading = false;
+    }
   }
 
   async function handleUpload() {
@@ -84,6 +95,23 @@
     </div>
   </div>
 
+  <!-- Error message -->
+  {#if error}
+    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-lg px-4 py-3 flex items-start gap-3">
+      <svg class="w-5 h-5 text-rose-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <div class="flex-1">
+        <p class="text-sm text-rose-700 dark:text-rose-300">{error}</p>
+      </div>
+      <button onclick={() => error = ""} class="text-rose-400 hover:text-rose-600 transition-colors">
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  {/if}
+
   <!-- Breadcrumbs -->
   <div class="flex items-center gap-1 text-sm flex-wrap">
     <button class="text-primary-600 hover:text-primary-700 font-medium transition-colors" onclick={() => browse("")}>volume1</button>
@@ -137,7 +165,9 @@
           <span class="text-xs text-surface-400 text-right">{e.is_dir ? "—" : formatSize(e.size)}</span>
           <div class="flex items-center justify-end gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
             {#if !e.is_dir}
-              <button onclick={() => handleDownload(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors">DL</button>
+              <button onclick={() => handleDownload(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors disabled:opacity-50" disabled={downloading}>
+                {downloading ? "..." : "DL"}
+              </button>
             {/if}
             <button class="text-[11px] text-rose-400 hover:text-rose-600 font-medium transition-colors" onclick={() => remove(e.name)}>Del</button>
           </div>