uix-uiFile upload
Drag & drop zone. 4 states.
import * as React from "react";
import { FileUpload } from "@/components/ui/file-upload";
export default function Example() {
const [name, setName] = React.useState("");
return (
<div style={{ width: 360, maxWidth: "100%" }}>
<FileUpload onFiles={files => setName(files[0]?.name ?? "")} helper={name ? `Added: ${name}` : "PNG or SVG, up to 2 MB."} />
</div>
);
}
Installation
$ npx uix-ui@latest add file-uploadThis copies the file into components/ui/file-upload.tsx in your project. npx shadcn@latest add @uix/file-upload works too.
Usage
import { FileUpload } from "@/components/ui/file-upload";
<div style={{ width: 360, maxWidth: "100%" }}>
<FileUpload onFiles={files => setName(files[0]?.name ?? "")} helper={name ? `Added: ${name}` : "PNG or SVG, up to 2 MB."} />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onFiles | (files: File[]) => void | – | Called with the chosen or dropped files. |
helper | React.ReactNode | – | Text under the prompt, for example the accepted types. |
error | string | – | Error message; replaces the helper text and turns the zone red. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx