FileUpload Component

React file upload component with drag-and-drop, click-to-browse, accept filters, size and count limits, per-file errors and a removable file list.

Import

javascript

1import { FileUpload } from "@neuctra/ui";

Basic Usage

Click or drop files; the built-in list shows name, size and a remove button.

Click to upload or drag and drop

Restrictions

accept, maxSizeMB and maxFiles reject invalid files with an inline message and an onError callback.

Upload product images

Accepted: image/* · Max 2 MB · Up to 3 files

Single File

Upload your CV

PDF only, max 5 MB

Props

All available props for the FileUpload component.

Prop	Type	Default	Description
onFilesChange	(files: File[]) => void	—	Fired with the full current list on every change
onError	(message, file) => void	—	Fired for each rejected file
multiple	boolean	false	Allow multiple files
accept	string	—	Native accept filter, e.g. "image/*,.pdf"
maxSizeMB	number	—	Per-file size limit
maxFiles	number	—	Total file count limit
label	string	"Click to upload or drag and drop"	Headline inside the drop zone
description	string	auto	Sub-line; defaults to a summary of the active limits
hideFileList	boolean	false	Hide the built-in selected-files list
disabled	boolean	false	Lock the drop zone
dropzoneClassName	string	—	Styles the drop zone label/container.
iconClassName	string	—	Styles the upload icon wrapper.
labelClassName	string	—	Styles the headline text inside the drop zone.
descriptionClassName	string	—	Styles the sub-line description text.
errorClassName	string	—	Styles the inline rejection message.
listClassName	string	—	Styles the selected-files list container.
fileItemClassName	string	—	Styles each file row in the list.
fileIconClassName	string	—	Styles the file icon in each row.
fileNameClassName	string	—	Styles the file name text.
fileSizeClassName	string	—	Styles the file size text.
removeButtonClassName	string	—	Styles the per-file remove button.

The drop zone is a real <label> wrapping a visually hidden file input — clicking and keyboard activation both open the browser dialog.
A focus ring appears on the zone via focus-within when the hidden input is focused.
Rejection messages render with role=alert; remove buttons are labelled per file.

Frequently Asked Questions

How do I install and import the FileUpload component?

Install the @neuctra/ui package, then import it with: import { FileUpload } from "@neuctra/ui";

Can I customize the FileUpload component's appearance?

Yes. FileUpload accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.

Is the FileUpload component accessible?

FileUpload is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.