F1 component kit/Media/Gallery picker (media library)Desktop

Gallery picker (media library)

F1 variant32 · gallery-picker

The server-paged media library as a picker: folder tree, search, upload in place (with per-file progress and type errors), multi-select with a running count, and the media-library grants (Q7) deciding who can upload.

Covers: gallery-picker primitive, picker designer. Exports: GalleryPicker.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

2 selected

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB
uploading + rejected file

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB
loading

Media Library

empty folder

Media Library

This folder is empty

Upload from the camera roll.

error

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB
中文 · lang=zh-Hans

媒体库

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Media Library

lapel-notch-navy-birdseye-228149-autumn-2026-sample-run-final.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB
permission denied

Media Library

lapel-notch-navy.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
GalleryPicker · @rj/admin-kit
Props
folder · multiple · accept · onPick · upload
States
loading · ready · selected · uploading · upload-error · empty · error · browse-only
shadcn / Radix
Dialog (picker) + ScrollArea + Checkbox
Package underneath
react-query (paged) · react-dropzone · react-virtual
Accessibility
grid of checkbox tiles; the count is announced
API operations
admin.media-library.list · admin.media-library.tree · admin.media-library.file
Phone variant
2-column grid, upload from camera roll
Permission
media-library grants (Q7)