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 | Default | Description |
---|---|---|
name: string | Name attribute. | |
mode: 'file' | 'filedrop' | 'dropzone' | 'file' | Available modes of the component. |
label: string | Text to be placed above the component. | |
buttonLabel: string | Text to be placed inside the button. | |
dropAreaLabel: string | Text to be placed inside the drag and drop zone alongside the button. | |
helperText: string | Helper text to be placed above the component. | |
accept: string | The 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: number | The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error. | |
maxSize: number | The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error. | |
multiple: boolean | true | If 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:
| |
showPreview: boolean | false | If 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: boolean | false | If true, the component will be disabled. |
callbackFile: function | This 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 | object | Size 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: number | 0 | Value of the tabindex. |
ref: object | New Reference to the component. |