feat: implement client-side upload queue with IndexedDB persistence
- upload-queue.ts: IndexedDB-backed queue manager using idb library - File blobs stored in IndexedDB (survives page reloads) - Sequential upload processing (one file at a time) - XHR-based upload with per-file progress tracking - Retry failed uploads, remove/clear completed items - Auto-resumes pending items on page load - UploadQueue.svelte: queue progress UI component - Per-file: filename, size, progress bar, status badge - Retry button on failed items, remove button, clear completed - Processing indicator with pulse animation - /upload page: file picker (multiple, image/video) with caption + hashtags - Drop zone UI with drag-and-drop styling - Caption supports inline #hashtags - Separate comma-separated hashtags field - Link to gallery feed Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
103
frontend/src/lib/components/UploadQueue.svelte
Normal file
103
frontend/src/lib/components/UploadQueue.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
import { queueItems, isProcessing, retryItem, removeItem, clearCompleted } from '$lib/upload-queue';
|
||||
import type { QueueItem } from '$lib/upload-queue';
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function statusLabel(status: QueueItem['status']): string {
|
||||
switch (status) {
|
||||
case 'pending': return 'Wartend';
|
||||
case 'uploading': return 'Wird hochgeladen';
|
||||
case 'done': return 'Fertig';
|
||||
case 'error': return 'Fehler';
|
||||
}
|
||||
}
|
||||
|
||||
function statusColor(status: QueueItem['status']): string {
|
||||
switch (status) {
|
||||
case 'pending': return 'text-gray-500';
|
||||
case 'uploading': return 'text-blue-600';
|
||||
case 'done': return 'text-green-600';
|
||||
case 'error': return 'text-red-600';
|
||||
}
|
||||
}
|
||||
|
||||
let items = $derived($queueItems);
|
||||
let hasCompleted = $derived(items.some((i) => i.status === 'done'));
|
||||
</script>
|
||||
|
||||
{#if items.length > 0}
|
||||
<div class="mt-4 rounded-lg border border-gray-200 bg-white">
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
|
||||
<h3 class="text-sm font-semibold text-gray-900">
|
||||
Upload-Warteschlange
|
||||
{#if $isProcessing}
|
||||
<span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
|
||||
{/if}
|
||||
</h3>
|
||||
{#if hasCompleted}
|
||||
<button
|
||||
onclick={() => clearCompleted()}
|
||||
class="text-xs text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
Fertige entfernen
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<ul class="divide-y divide-gray-100">
|
||||
{#each items as item (item.id)}
|
||||
<li class="px-4 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-gray-900">{item.fileName}</p>
|
||||
<p class="text-xs text-gray-500">{formatSize(item.fileSize)}</p>
|
||||
</div>
|
||||
<div class="ml-3 flex items-center gap-2">
|
||||
<span class="text-xs font-medium {statusColor(item.status)}">
|
||||
{statusLabel(item.status)}
|
||||
</span>
|
||||
{#if item.status === 'error'}
|
||||
<button
|
||||
onclick={() => retryItem(item.id)}
|
||||
class="rounded bg-red-100 px-2 py-0.5 text-xs text-red-700 hover:bg-red-200"
|
||||
>
|
||||
Erneut
|
||||
</button>
|
||||
{/if}
|
||||
{#if item.status === 'done' || item.status === 'error'}
|
||||
<button
|
||||
onclick={() => removeItem(item.id)}
|
||||
class="text-gray-400 hover:text-gray-600"
|
||||
aria-label="Entfernen"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if item.status === 'uploading'}
|
||||
<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
|
||||
<div
|
||||
class="h-full rounded-full bg-blue-500 transition-all duration-300"
|
||||
style="width: {item.progress}%"
|
||||
></div>
|
||||
</div>
|
||||
<p class="mt-1 text-right text-xs text-gray-400">{item.progress}%</p>
|
||||
{/if}
|
||||
|
||||
{#if item.error}
|
||||
<p class="mt-1 text-xs text-red-500">{item.error}</p>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user