File Upload

Empty StateHover Card

A drag-and-drop zone with file type and size checks.

Drag & drop files here, or click to browsePNG, JPG or PDF · up to 5 MB · max 3 files

Installation

pnpm add krz-ui

Usage

import { FileUpload } from "krz-ui";
<FileUpload
  label="Attachments"
  multiple
  accept="image/*,.pdf"
  maxSize={5 * 1024 * 1024}
  description="PNG, JPG or PDF up to 5 MB"
  onValueChange={setFiles}
  onReject={(rejected) => console.log(rejected)}
/>

API Reference

PropTypeDescription
value / defaultValueFile[]Controlled or initial files.
onValueChange(files: File[]) => voidCalled when files are added or removed.
onReject(rejections: FileRejection[]) => voidFiles that weren't added, with a reason: "type", "size" or "count".
acceptstringAllowed types, e.g. "image/*,.pdf".
multiple / maxFilesboolean / numberAllow several files, up to a limit.
maxSizenumberMaximum bytes per file.
label / title / description / errorReactNodeText around and inside the drop zone.
className / style / ref—All go to the outer element. See Customization.
classNames{ label?, zone?, icon?, title?, description?, message?, list?, file?, fileName?, fileSize?, remove? }Extra classes for inner parts.