Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
File upload

Allows the user to upload files to the product.

Multiple upload

Multiple files can be dragged into the upload area or selected via the system dialog.

Compact variant

For the multiple uploader, a compact view is available when it is empty.

File size

When uploading multiple files, their size is always shown in the list. For the single uploader, displaying the file size is configured separately.

Icon for selected file

Selected files can be configured with a custom icon, for example, for images.

Selecting folders or files

The component can be configured to allow selecting only files, only folders, or both files and folders.

Disabled state

In the disabled state, the component does not receive focus and drag-and-drop functionality does not work.

Error

When an invalid file is selected, only the corresponding item in the list receives the error state, not the entire component. Error messages are displayed below the uploader.

Height of the selected items list

By default, the component grows in height when many files are selected. However, you can set a maximum height, after which scrolling will appear.

It is also possible to set a fixed height for the uploader.

Full-screen file uploader

The user can drag files onto the page, and at that moment a full-screen upload overlay will be shown.

Upload area

The drag-and-drop area can be not only the entire screen or the File Upload component itself within a form, but also a separate part of the screen.

Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.