Merge pull request 'Fix file download error handling' (#49) from fix/file-download-error-handling into main
This commit was merged in pull request #49.
This commit is contained in:
@@ -202,12 +202,17 @@ export async function download(path, filename) {
|
||||
const headers = {};
|
||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
||||
|
||||
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);
|
||||
@@ -218,4 +223,8 @@ export async function download(path, filename) {
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (e) {
|
||||
console.error("Download error:", e);
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user