Wire photo upload on player profile edit page #42

New issue

Closed

opened 2026-03-18 19:43:21 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-18 19:43:21 +00:00

Owner

Type

Feature

Lineage

plan-wkq → Phase 11 → Girls Tryout prep (profile completion)

Repo

forgejo_admin/westside-app

User Story

As a parent
I want to upload or update my player's photo from their profile page
So that the profile is complete for team placement

Context

The player profile page (/players/[id]) has an edit mode with a file input for photo upload (lines 222-228), but it's not connected to the backend. The backend endpoint (POST /upload/photo) already exists in basketball-api and works — accepts JPG/PNG/WebP up to 5MB, returns photo_url. The registration form already uploads photos successfully using the same endpoint. This just needs the profile page wired the same way.

The profile currently shows initials as the avatar. After upload, it should show the actual photo. If the player already has a photo_url from registration, it should display that too (it doesn't currently).

File Targets

Files the agent should modify:

src/routes/players/[id]/+page.svelte — wire the existing file input (line 227) to call POST /upload/photo, then PUT /players/{id} with the returned photo_url. Also display player.photo_url if it exists instead of initials.
src/lib/api.js — may need a apiUpload() helper for multipart/form-data if one doesn't exist (check registration form for existing pattern)

Files the agent should NOT touch:

src/routes/register/+page.svelte — registration photo upload already works
Any backend files — this is frontend only

Acceptance Criteria

When a parent clicks the avatar in edit mode and selects a photo, it uploads to the API and the avatar updates immediately
When a player has a photo_url (from registration or profile edit), the avatar shows the photo instead of initials
When upload fails (wrong type, too large), an error message is shown
When the page reloads, the uploaded photo persists

Test Expectations

Manual test: upload a photo, verify it displays
Manual test: verify error for oversized file
Run command: npm run check (Svelte type check)

Constraints

Match existing apiFetch pattern in src/lib/api.js
Check src/routes/register/+page.svelte for the existing photo upload pattern and reuse it
No new dependencies

Checklist

PR opened
No unrelated changes
Photo displays after upload without page reload

phase-wkq-11-girls-tryout — pre-team-placement profile completion

### Type Feature ### Lineage `plan-wkq` → Phase 11 → Girls Tryout prep (profile completion) ### Repo `forgejo_admin/westside-app` ### User Story As a parent I want to upload or update my player's photo from their profile page So that the profile is complete for team placement ### Context The player profile page (`/players/[id]`) has an edit mode with a file input for photo upload (lines 222-228), but it's not connected to the backend. The backend endpoint (`POST /upload/photo`) already exists in basketball-api and works — accepts JPG/PNG/WebP up to 5MB, returns `photo_url`. The registration form already uploads photos successfully using the same endpoint. This just needs the profile page wired the same way. The profile currently shows initials as the avatar. After upload, it should show the actual photo. If the player already has a `photo_url` from registration, it should display that too (it doesn't currently). ### File Targets Files the agent should modify: - `src/routes/players/[id]/+page.svelte` — wire the existing file input (line 227) to call `POST /upload/photo`, then `PUT /players/{id}` with the returned `photo_url`. Also display `player.photo_url` if it exists instead of initials. - `src/lib/api.js` — may need a `apiUpload()` helper for multipart/form-data if one doesn't exist (check registration form for existing pattern) Files the agent should NOT touch: - `src/routes/register/+page.svelte` — registration photo upload already works - Any backend files — this is frontend only ### Acceptance Criteria - [ ] When a parent clicks the avatar in edit mode and selects a photo, it uploads to the API and the avatar updates immediately - [ ] When a player has a `photo_url` (from registration or profile edit), the avatar shows the photo instead of initials - [ ] When upload fails (wrong type, too large), an error message is shown - [ ] When the page reloads, the uploaded photo persists ### Test Expectations - [ ] Manual test: upload a photo, verify it displays - [ ] Manual test: verify error for oversized file - Run command: `npm run check` (Svelte type check) ### Constraints - Match existing `apiFetch` pattern in `src/lib/api.js` - Check `src/routes/register/+page.svelte` for the existing photo upload pattern and reuse it - No new dependencies ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] Photo displays after upload without page reload ### Related - `phase-wkq-11-girls-tryout` — pre-team-placement profile completion