Bulk Import CSV Card
Drop zone, column mapping with one flagged field, and the dry run promise.
Drop zone, column mapping with one flagged field, and the dry run promise.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Bulk Import CSV Card is the member import surface: a dashed drop zone showing members.csv, 48 rows, 4 columns, 6.2 KB, with a replace hint. Below it a column mapping table lists each CSV column (full_name, email_address, member_role, last_seen), a sample value, and a closed Select for the target field. The last_seen column is unmapped and its Select trigger carries a foreground/40 border to flag it. A 1 unmapped Badge sits above the table. The row issue line is honest: 1 of 48 rows has an issue, row 23 is missing an email, it will be skipped and listed in the preview.
Columns are a const array with a mapped flag driving the Select default and the trigger style. The footer promise, nothing writes until you confirm the diff, is the reason users trust the import flow.
Reach for this block on any bulk-import flow, wired to a POST /imports/preview endpoint that returns the diff before committing. Surface row-level issues from the preview response in the same spot the static copy occupies here.
A natural flow around it on an Application Pro page:
Before
After
One strong use is workspace member import. Other CSV import surfaces:
Tip: show the exact row number with the issue so the user can open the file and fix it without guessing.