File Input

The file input component is used to choose files from any location in the local machine and update those files to the server where the application is hosted. It is a common procedure in applications where files are required, like documents, images, or other information in digital formats.

Props

NameTypeDescriptionDefault
Deprecated
name
stringName attribute.-
mode'file' | 'filedrop' | 'dropzone'Available modes of the component.'file'
labelstringText to be placed above the component.-
buttonLabelstringText to be placed inside the button.-
dropAreaLabelstringText to be placed inside the drag and drop zone alongside the button.-
helperTextstringHelper text to be placed above the component.-
acceptstringThe file types that the component accepts. Its value must be one of all the possible values of the HTML file input's accept attribute. Please check the documentation here.-
minSizenumberThe minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file will have an error.-
maxSizenumberThe maximum file size (in bytes) allowed. If the size of the file does not comply this value, the file will have an error.-
Required
value
{ file: File, error?: string, preview?: string }[]An array of files representing the selected files. Each file has the following properties:
  • file: Selected file.
  • error: Error of the file. If it is defined, it will be shown and the file item will be mark as invalid.
  • preview: Preview of the file.
-
showPreviewbooleanIf true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file type will be shown.false
multiplebooleanIf true, the component allows multiple file items and will show all of them. If false, only one file will be shown, and if there is already one file selected and a new one is chosen, it will be replaced by the new selected one.true
disabledbooleanIf true, the component will be disabled.false
Required
callbackFile
(files: { file: File, error?: string, preview?: string }[]) => voidThis function will be called when the user adds or deletes a file. That is, when the file input's inner value is modified. The list of files will be sent as a parameter. In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
tabIndexnumberValue of the tabindex attribute.0
refReact.Ref <HTMLDivElement>Reference to the component.-

Examples

Basic usage

Error handling

Inside a form