← All templates

CSV Import

Three-step upload wizard: file picker, column mapping, and review/import.

Form
Open in editor →
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
      }
    }
  }