File upload
Updated
FileUpload is a drop area in a pixel-dashed ink frame, dithered while files are dragged over it. It's a native file input stretched invisibly across the frame, so clicking, dropping and the keyboard all work, and the files submit with a form. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
Up to 5 MB each.
import "@/components/dithercharts/controls.css"
import { FileUpload } from "@/components/dithercharts/file-upload"
<FileUpload
label="Data"
name="data"
accept=".csv,text/csv"
multiple
prompt="Drop CSV files or click to browse"
hint="Up to 5 MB each."
onFilesChange={(files) => setFiles(files)}
/>Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add file-upload
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the drop area, and the input's accessible name. |
| prompt | Type ReactNode | Default "Drop files or click to browse" | The drop area's text until files are chosen. |
| onFilesChange | Type (files: File[]) => void | Default – | Called with the chosen or dropped files. |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |