← All templates Form
CSV Import
Three-step upload wizard: file picker, column mapping, and review/import.
Start typing to see your wireframe…
The Wiremark source
This is the entire template — edit it live in the editor, or paste it into any .wiremark file.
wiremarkUI
header H "Import"
page UPLOAD "Upload Data" {
H
section "Import CSV" {
card "Step 1 — Select file" {
form "Upload" {
text "Drag and drop a CSV file here, or click to browse."
button "Browse files" primary
text "Supported formats: .csv, .xlsx, .tsv — max 50 MB"
}
}
card "Step 2 — Map columns" {
table "Column Mapping" {
columns "CSV Column", "Maps to field", "Sample value"
row "first_name", "First Name", "Alice"
row "last_name", "Last Name", "Martin"
row "email_addr", "Email", "alice@example.com"
row "created", "Joined date", "2024-01-15"
}
}
card "Step 3 — Review & import" {
text "943 rows ready to import. 7 rows have validation errors."
alert "7 rows skipped — duplicate email addresses." warning
button "Back"
button "Import 943 rows" primary
}
}
}