File Upload

Overview

A compound component that manages file state internally. Provides a dropzone area and a file list sub-component. Validates file type and size before adding files.

Usage

import { FileUpload } from "@leanicon/web-builder-library";

<FileUpload
  accept="image/*,.pdf"
  maxSize={5 * 1024 * 1024}
  multiple
  onFilesChange={(files) => console.log(files)}
>
  <FileUpload.Dropzone />
  <FileUpload.FileList />
</FileUpload>;

Notes

• Error messages are displayed automatically below the dropzone when validation fails.
• FileUpload.Dropzone supports click, keyboard (Enter/Space), and drag-and-drop interaction.
• FileUpload.FileList renders nothing when no files are selected.
• The hidden <input type="file"> is managed internally; use onFilesChange to access selected files.
• Dark mode is handled via semantic tokens.