FileUpload

molecule

Drag-and-drop file upload zone with file list, progress tracking, error display, and size validation.

"Add a FileUpload from lucent-ui that accepts images up to 5 MB. Show progress bars and allow multiple files. Handle onError for size validation feedback."

Usage

React / JSX

import { FileUpload } from 'lucent-ui'

<FileUpload />

Installation

pnpm add lucent-ui

API Reference

FileUpload props — * required

Prop	Type	Default	Description
`value`*	`UploadFile[]`	—	Controlled list of UploadFile objects.
`onChange`*	`(files: UploadFile[]) => void`	—	Called when the file list changes.
`accept`	`string`	—	Accepted MIME types, e.g. "image/*" or ".pdf".
`multiple`	`boolean`	`false`	Allow multiple file selection.
`maxSize`	`number`	—	Maximum file size in bytes.
`onError`	`(error: string) => void`	—	Called when a file exceeds maxSize.
`disabled`	`boolean`	`false`	Disables the upload zone.
`style`	`React.CSSProperties`	—	Inline styles for the wrapper.

← PreviousDataTable Next →PageLayout

FileUpload

Image upload

Disabled

Usage

Installation

API Reference