UploadCN
DocsComponentsExamples

CSV Import

Bulk import from a spreadsheet. The CSV is read in the browser, required columns are checked and the first rows previewed, before anything uploads.

"use client"

import { CsvImport } from "@/components/csv-import"

export default function CsvImportExample() {
  return (
    <div className="w-full max-w-xl">
      <CsvImport />
    </div>
  )
}

Installation

npx shadcn@latest add @uploadcn/csv-import

Usage

import { CsvImport } from "@/components/csv-import"
<CsvImport
  columns={[
    { key: "email", label: "Email", required: true },
    { key: "name", label: "Name" },
  ]}
  onSuccess={(item, preview) => startImportJob(item.result, preview.rowCount)}
/>

Uploading only starts when the user clicks Import, and stays disabled while required columns are missing. Parsing is a small RFC 4180 parser, swap in Papa Parse for exotic files.

Props

Prop

Type

On this page

InstallationUsageProps