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:
fabi
2026-04-01 18:59:23 +02:00
parent 3f052a4f91
commit 4e1f1d6426
3 changed files with 415 additions and 0 deletions

View File

@@ -0,0 +1,79 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken } from '$lib/auth';
import { addToQueue, loadQueue } from '$lib/upload-queue';
import UploadQueue from '$lib/components/UploadQueue.svelte';
import { onMount } from 'svelte';
let caption = $state('');
let hashtags = $state('');
let fileInput: HTMLInputElement;
onMount(() => {
if (!getToken()) {
goto('/join');
return;
}
loadQueue();
});
async function handleFiles() {
const files = fileInput?.files;
if (!files || files.length === 0) return;
for (const file of files) {
await addToQueue(file, caption, hashtags);
}
// Reset form
caption = '';
hashtags = '';
if (fileInput) fileInput.value = '';
}
</script>
<div class="min-h-screen bg-gray-50 p-4">
<div class="mx-auto max-w-lg">
<div class="mb-6 flex items-center justify-between">
<h1 class="text-xl font-bold text-gray-900">Hochladen</h1>
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-4">
<label
class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 transition hover:border-blue-400 hover:bg-blue-50"
>
<svg class="mb-2 h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
</svg>
<span class="text-sm font-medium text-gray-600">Fotos oder Videos auswählen</span>
<span class="mt-1 text-xs text-gray-400">Mehrere Dateien möglich</span>
<input
bind:this={fileInput}
type="file"
accept="image/*,video/*"
multiple
class="hidden"
onchange={handleFiles}
/>
</label>
<div class="mt-4 space-y-3">
<input
type="text"
bind:value={caption}
placeholder="Beschreibung (optional, #hashtags möglich)"
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
/>
<input
type="text"
bind:value={hashtags}
placeholder="Hashtags (kommagetrennt, z.B. hochzeit, party)"
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
/>
</div>
</div>
<UploadQueue />
</div>
</div>