@edux-design/fileupload

Drag-and-drop CSV uploader with async parsing and controlled/uncontrolled file lists. The component keeps the UI minimal while giving consumers full control over accepted file types and header handling.

Installation

pnpm add @edux-design/fileupload @edux-design/utils
# or
npm install @edux-design/fileupload @edux-design/utils

Peer deps: react@^19.1.0, react-dom@^19.1.0.

Usage

import { Fileupload } from "@edux-design/fileupload";

export function CsvImport() {
  return (
    <Fileupload
      accept=".csv,text/csv"
      includeHeaders
      onFilesParsed={(files) => {
        console.log(files[0].records);
      }}
    />
  );
}

Key props

| Prop | Purpose | | ---- | ------- | | accept | File accept string passed to the underlying input. | | multiple | Allows multi-file selection. | | value / defaultValue | Controlled/uncontrolled file lists. | | onChange | Callback when files are selected or dropped. | | includeHeaders | Treats the first CSV row as headers. | | onFilesParsed | Receives parsed results { file, rows, headers, records }. |

Development

pnpm --filter @edux-design/fileupload lint
pnpm --filter @edux-design/fileupload check-types
pnpm --filter @edux-design/fileupload build

Storybook-style demos live under src/demos/Fileupload.stories.jsx.