Home
Docs
Themes
InfinityFX
©Copyright2016-2026 InfinityFX. All rights reserved.
InfinityFX®
Fluid UI
v2.1.3
Getting started
Installation
Configuration
Theming
Components
Display
ActionMenu
Combobox
Annotation
Badge
Code
Empty
Gradient
Key
Swatch
Table
Ticker
Timeline
Toast
Tooltip
Feedback
CircularProgress
Indicator
Interactable
ProgressBar
Skeleton
Spinner
Input
Autocomplete
Button
Calendar
Checkbox
Chip
ColorField
ColorPicker
DateField
Dial
DropZone
Field
FileField
Hamburger
NumberField
PasswordField
Pincode
Radio
Segmented
Select
Slider
Switch
Textarea
ThemeToggle
TimeField
Toggle
Layout
Accordion
Card
Popover
Sidebar
Collapsible
Cull
Divider
Drawer
Group
Modal
Overlay
Panel
Scrollarea
Navigation
NavigationMenu
Pagination
Stepper
Tabs
Hooks
useFluid
Links
Changelog
Create Fluid App
Skills
llms.txt

DropZone

An input that allows for drag and dropping files.

Importing

1
import { DropZone } from '@infinityfx/fluid';

Usage

Accepted types

API reference

DropZone Props

loading?
boolean
false
Shows a loading spinner while true.
error?
any
Marks the drop zone as invalid when truthy.
text?
string
"Drop files or click to browse"
Instruction text shown in the empty state.
annotation?
string
Additional annotation text shown below the main text.
icon?
React.ReactNode
Custom icon shown in the empty state.
previewImages?
boolean
false
Shows a preview when an image file is selected.
fallbackPreviewImage?
string
Fallback image URL to show when no file is selected but previewImages is enabled.
inputRef?
React.Ref<HTMLInputElement>
Ref forwarded to the underlying file input element.
onChange?
React.ChangeEventHandler<HTMLInputElement>
disabled?
boolean
false
Drop files or click to browse
Max size: 10MB
accept
annotation
error
previewImages
disabled
loading
Upload avatar *
Drop an image or click to browse
JPEG, JPG or PNG