File Upload

Spreadsheet Validator accepts a File object and handles parsing internally. It supports .xlsx and .csv files.

Supported File Types

The component validates the file type before processing. If an unsupported file is provided, it will be rejected.

Basic File Input

The simplest way to get a file is with a native input:

const [file, setFile] = useState<File | null>(null)

<input
  type="file"
  accept=".xlsx,.csv"
  onChange={(e) => setFile(e.target.files?.[0] ?? null)}
/>

{file && <TableReader file={file} schema={schema} />}

With Drag and Drop

You can use any drag-and-drop library. Here's an example with react-dropzone:

import { useDropzone } from "react-dropzone"

function FileUpload() {
  const [file, setFile] = useState<File | null>(null)

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: {
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
      "text/csv": [".csv"],
    },
    maxFiles: 1,
    onDrop: (files) => setFile(files[0]),
  })

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? "Drop here..." : "Drag a file or click to select"}
      </div>
      {file && <TableReader file={file} schema={schema} />}
    </div>
  )
}

Loading State

While the file is being parsed and validated, you can show a custom loading component:

<TableReader
  file={file}
  schema={schema}
  loadingComponent={<div>Processing your spreadsheet...</div>}
/>

How Parsing Works

1. The file is read as a binary string using the FileReader API
2. The xlsx library converts the binary data to a workbook
3. Only the first sheet is processed
4. Each row is converted to a JSON object with column headers as keys
5. A __rowNum__ property is added to track the original row position

Next Steps

Learn how to apply Custom Styling to the table component.