F1 component kit/Forms and editing/Uploader and import flowPhone

Uploader and import flow

F1 variant16 · 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.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

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

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

States

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

drop zone

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

dragging over

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

wrong file type

Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browse“codes.xlsx” is not a CSV. Save as CSV (UTF-8) and drop it again.

Download the template

uploading

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

CSV

fabric-codes-VBC-2026-10.csv412 KB · uploading 64%

map columns

Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

codeFabric code

supplierSupplier

name_enName (English)

name_cnName (Chinese)

price— skip —

review step

Upload

Map columns

3Preview

4Confirm

5Progress

6Result

Added128

Updated2,041

Unchanged1,412

Linked23

Errors4

4 rows need fixing

or import the other 3,604 and skip them

Row	Column	Problem
212	supplier	“VBX” is not a supplier
1,388	code	duplicate of row 1,301 (228155)

importing (polled)

Upload

Map columns

Preview

Confirm

5Progress

6Result

Importing 3,604 rows

2,090 / 3,604 · polled every 3 s · you can leave this page; it continues in Jobs

result

Upload

Map columns

Preview

Confirm

Progress

6Result

stopped at a row

Upload

Map columns

Preview

Confirm

Progress

6Result

cancelled

Upload

Map columns

Preview

4Confirm

5Progress

6Result

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

comfortable · data-density=comfortable

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

English · 中文

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

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

中文 · lang=zh-Hans

1上传

2映射列

3预览

4确认

5进度

6结果

拖入 CSV 或浏览选择CSV，最大 10 MB · 每行一个面料编码

下载模板

Long string · permission denied

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

long string

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

permission denied

Not available to your role

Your role is missing import fabric codes. Nothing here is hidden by mistake: the server sends only what you can do.

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

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

DTC admin · data-theme=dtc

1Upload

2Map columns

3Preview

4Confirm

5Progress

6Result

Drop the CSV here or browseCSV, up to 10 MB · one row per fabric code

Download the template

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