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.


name: stringName attribute.
mode: 'file' | 'filedrop' | 'dropzone''file'Available modes of the component.
label: stringText to be placed above the component.
buttonLabel: stringText to be placed inside the button.
dropAreaLabel: stringText to be placed inside the drag and drop zone alongside the button.
helperText: stringHelper text to be placed above the component.
accept: stringThe 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.
minSize: numberThe minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error.
maxSize: numberThe maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error.
multiple: booleantrueIf 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.
value: object[]An array of files representing the selected files. Each file has the following properties:
  • file: File: Selected file.
  • error: string: Error of the file. If it is defined, it will be shown and the file item will be mark as invalid.
  • preview: string: Preview of the file.
showPreview: booleanfalseIf true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
disabled: booleanfalseIf true, the component will be disabled.
callbackFile: functionThis function will be called when the user selects or drops a file. 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: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number0Value of the tabindex.


Basic usage

Error handling