| Name | Description | Default | Type |
|---|---|---|---|
className | Additional CSS classes. | | string |
disabled | Disable the control. The browser defaults to false. | | boolean |
files | An array of files that have been uploaded. | | FileUploadItemProps[] |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | | boolean |
multiple | Allow multiple files to be selected from the OS specific file browser. NOTE: This does not restrict multiple files from being added via drag and drop. Restrict multi file drag and drop via onFilesAdded and custom info message. | false | boolean |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onFilesAdded | | (files: File[]) => void | |
ref | Ref for the input element within the component's dom structure. | | Ref<HTMLInputElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
FileInput
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The FileInput component lets a user upload files or attachments via drag-and-drop or by opening the user's file explorer when clicked.
Usage
FileInputs can be formatted to accept on single files or multiple files. When the input detects files have been added, an onFilesAdded callback function is triggered. This callback should receive a list of files that were attached, and manage their state within your application.
The FileInput component accepts a list of files that will render FileUploadItems within a Grid underneath the input. The FileInput component allows for standard Form Field structures such as being set required or disabled, as well as including a label, status, or info.
Example
Drag and drop or Choose files