Gallery picker (media library)
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.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
States
5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
2 selected
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
uploading + rejected file
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
lapel-shawl-ecru.jpguploading 62%
lapel-shawl.heicHEIC not supported · retry as JPG
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
loading
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
empty folder
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
This folder is empty
Drop images here or upload; they land in Garments › Jackets › Lapels.
error
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
Images didn’t load
The media library answered 500.
request id 51aa09f2Density
Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.
compact · default · data-density=compact
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
comfortable · data-density=comfortable
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
en
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
中文 · lang=zh-Hans
搜索文件名服装 › 外套 › 驳头 · 42 个文件
服装412
外套186
驳头42
口袋37
裤子121
面料3,604
市场88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
已选 2 张
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
long string
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
lapel-notch-navy-birdseye-228149-autumn-2026-sample-run-shanghai-final-retouched-v4.jpg1200 × 1600 · 180 KB
lapel-peak-charcoal.jpg1237 × 1600 · 193 KB
pocket-flap.jpg1274 × 1600 · 206 KB
pocket-ticket.jpg1311 × 1600 · 219 KB
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
permission denied
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
Both apps
One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.
Laravel admin · :root
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
DTC admin · data-theme=dtc
Search file namesGarments › Jackets › Lapels · 42 files
Garments412
Jackets186
Lapels42
Pockets37
Trousers121
Fabrics3,604
Marketing88
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
vent-double.jpg1348 × 1600 · 232 KB
button-horn-4.jpg1385 × 1600 · 245 KB
lining-bemberg-ecru.jpg1422 × 1600 · 258 KB
collar-cutaway.jpg1459 × 1600 · 271 KB
2 selected
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)