dashboard/frontend/src/lib/api.js

@@ -197,3 +197,25 @@ export function getInfoEngineItem(id) {
 export function put(path, data) {
   return request(path, { method: "PUT", json: data });
 }
+
+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,
+  });
+
+  if (!r.ok) throw new Error(`HTTP ${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);
+}

dashboard/frontend/src/routes/Files.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte";
-  import { get, del, upload } from "../lib/api.js";
+  import { get, del, upload, download } from "../lib/api.js";
 
   let entries = $state([]);
   let currentPath = $state("");
@@ -29,9 +29,9 @@
     browse(currentPath);
   }
 
-  function downloadUrl(name) {
+  async function handleDownload(name) {
     const path = currentPath ? `${currentPath}/${name}` : name;
-    return `/api/files/download?path=${encodeURIComponent(path)}`;
+    await download(path, name);
   }
 
   async function handleUpload() {
@@ -137,7 +137,7 @@
           <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-0 group-hover:opacity-100 transition-opacity">
             {#if !e.is_dir}
-              <a href={downloadUrl(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors">DL</a>
+              <button onclick={() => handleDownload(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors">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>