FileUpload

A file upload component with drag-and-drop support, file validation, and preview functionality.

Area Variant

Drag and drop files here, or browse

Inline Variant

Drop files here or browse

Sizes

Drag and drop files here, or browse

Drag and drop files here, or browse

Drag and drop files here, or browse

Disabled

Drag and drop files here, or browse

Mobile considerations

• On touch devices, tap-to-browse is the primary interaction — drag-and-drop hover styles still apply for desktop browsers that report pointer: fine.
• accept="image/*" triggers the OS image picker (camera roll, files app, or live camera on iOS / Android).
• accept="image/*" + capture="environment" (passed via standard HTML attribute) opens the rear camera directly — useful for receipt / document capture flows.
• The dropzone meets a 44px tap target at all sizes; variant="inline" is preferred for compact mobile forms.

With Restrictions

<FileUpload
  accept="image/*,.pdf"
  multiple
  maxFiles={5}
  maxFileSize={10 * 1024 * 1024}
  onFilesChange={(files) => console.log(files)}
  onValidationError={(errors) => console.error(errors)}
/>

Props

Prop	Type	Default	Description
accept	string	-	Accepted file types (e.g. "image/*,.pdf")
multiple	boolean	false	Allow multiple file selection
maxFiles	number	-	Maximum number of files allowed
maxFileSize	number	-	Maximum file size in bytes
fileList	FileUploadFile[]	-	List of uploaded files to display
disabled	boolean	false	Disabled state
onFilesChange	(files: File[]) => void	-	Callback when valid files are added
onRemove	(file: FileUploadFile) => void	-	Callback when a file is removed
onValidationError	(errors: ValidationError[]) => void	-	Callback when validation errors occur
variant	'area' | 'inline'	'area'	Visual variant
listType	'list' | 'grid'	'list'	File list display type
size	'sm' | 'md' | 'lg'	'md'	Size of the dropzone
placeholder	string	-	Custom placeholder text
browseText	string	'browse'	Text for the browse link
renderPreview	(file: FileUploadFile) => ReactNode	-	Custom preview renderer for grid items
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles