Uploader and import flow
CSV / JSON / ZIP into the import flow: upload → map → preview (added / updated / unchanged / linked / errors, with the failing rows) → confirm → progress (polled) → result. Limits are stated up front; a failed run says exactly what was written.
Covers: file-uploader primitive, uploader designer, review-step designer. Exports: FileUploader, ImportFlow, ReviewStep.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
States
10 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
导入需在桌面完成
请在电脑上打开此页。进行中的导入仍会显示在任务列表。
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Imports are a desktop job
Open this page on a computer. A running import still shows in your Jobs tray.
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
FileUploader·@rj/admin-kit- Props
accept·maxBytes·multiple·onUpload- States
- idle · drag-over · invalid · uploading % · uploaded · error
- shadcn / Radix
- none (drop zone) + Progress
- Package underneath
- react-dropzone
- Accessibility
- the drop zone is a button; errors are announced
- Export
ImportFlow·@rj/admin-kit- Props
steps·preview(counts + row errors) ·onConfirm·onCancel·job- States
- upload · map · preview · confirming · progress · done · failed · cancelled
- Package underneath
- react-query polling
- API operations
- admin.fabric-codes.import → .import.preview.status → .confirm / .cancel · admin.pt-colors.import.preview · admin.colourway-families.import.preview / .confirm · admin.fitq.import · admin.media-library.archives.extract
- Phone variant
- not on phone (fallback page); the job shows in the phone tray
- Export
ReviewStep·@rj/admin-kit- Props
counts{added, updated, unchanged, linked, errors} ·errors[]{row, column, message}- States
- clean · with errors · skip-and-continue