b259d1f571
Frontend-only branch consuming the multipart endpoints from feat/uploads.
- /upload page with two sections:
- "Create manga": title (required), author, description, optional
cover. Submit posts the FormData to POST /api/v1/mangas via the
existing createManga client.
- "Upload chapter": manga selector (preloaded via listMangas
sort=title, limit=200), chapter number, optional title, and a
drag-drop zone for page images. Pages render in an ordered list
with up/down/remove controls so the user can fix order without
re-uploading. The same hidden file input is used by both the
"browse" link and Playwright's setInputFiles, so the e2e test
exercises the real submission code path even though it doesn't
simulate the drag mechanics.
- Client-side preflight in lib/upload-validation.ts (extracted so
Vitest can target it directly): rejects files over 20 MiB with a
sized message and rejects MIME types outside the
jpeg/png/webp/gif/avif whitelist. Files with an empty file.type fall
through to the backend's magic-byte sniff, which stays the
authoritative check. The submit button is disabled while any pending
page has a client-side error, so an oversized file never reaches the
network.
- API errors are surfaced via the envelope: 401 redirects to /login,
everything else is rendered as the form's role=alert message. The
backend's 415/413/422/409 message strings carry enough context that
the user can act on them without us repeating the field name
client-side (matches what we already surface for /auth errors).
- /upload requires auth: anonymous users see a "Sign in to upload"
prompt linking to /login instead of empty forms.
Vitest coverage (10 cases):
- validateImageFile null on small images and on each of the five
whitelisted MIMEs.
- Oversized files → sized "too large" message that names the file.
- Non-image MIME → "unsupported image type X" naming the type.
- Empty file.type → passes (deferred to backend sniff).
- formatBytes handles B / KiB / MiB.
Playwright coverage (e2e/upload.spec.ts, 4 cases):
- Anonymous user sees the sign-in prompt.
- A "page.png" whose bytes are a PDF (client validator passes because
it trusts the declared MIME for preflight) reaches the mocked
backend, which 415s, and the form renders the backend's message.
- Happy path: create a manga, then upload a 2-page chapter, with both
successes asserted from the mocked 201 responses.
- A 21 MiB file is added to the pages list with a "too large" error,
the submit button stays disabled, and zero POSTs leave the browser.
Lockstep version bump to 0.9.0.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mangalord
A self-hosted manga and comics reader. Browse, search, read, bookmark, and upload manga and chapters. The HTTP API is consumed by both the SvelteKit web UI and external bots/scripts that perform the same actions programmatically.
Stack
- Backend: Rust, axum, sqlx
- Database: Postgres 16
- Frontend: SvelteKit 2 (Svelte 5 runes), TypeScript, Vite
- File storage: pluggable
Storagetrait — local FS today, S3 (and friends) as future impls - Deploy: Docker Compose on a single server
Quick start
cp .env.example .env
docker compose up --build
- Frontend: http://localhost:3000
- API: http://localhost:8080/api
- API health: http://localhost:8080/api/health
Local development
Run only Postgres in Docker; run backend and frontend natively for fast iteration:
docker compose -f docker-compose.dev.yml up -d
# backend
cd backend
export DATABASE_URL=postgres://mangalord:mangalord@localhost:5432/mangalord
cargo run
# frontend (separate shell)
cd frontend
npm install
npm run dev
The Vite dev server proxies /api to http://localhost:8080.
Tests
This project is developed test-first. Tests live at three levels:
# Backend: unit (in-module) + integration (tests/, per-test DB via #[sqlx::test])
cd backend && cargo test
# Frontend: unit / module tests (Vitest)
cd frontend && npm test
# Frontend: end-to-end (Playwright; spins up dev server, mocks API by default)
cd frontend && npm run test:e2e
API surface
| Method | Path | Purpose |
|---|---|---|
| GET | /api/health |
Liveness |
| GET | /api/mangas |
List / search mangas |
| POST | /api/mangas |
Create a manga |
| GET | /api/mangas/{id} |
Get a manga |
| GET | /api/files/{key} |
Stream a blob (cover, chapter page) |
Chapters, uploads, and bookmarks are next — the patterns to extend are documented in CLAUDE.md.