File Input Showcase
Example
Drag and drop file here or
Example 2
Drag and drop file here or
Example 3
Component Documentation
Component Name
FileInput
Builder Function Name
create_file_input_manager
Description
allows users to select or drop files; optionally multiple, with drag-and-drop area and custom validation
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | any | the current file or array of files selected | |
| label | string | label for the file input | |
| name | string | file | the name attribute for the underlying file input element |
| is_required | boolean | false | marks the input as required |
| is_read_only | boolean | false | makes the file input read-only if true |
| accept | array | image/png,image/jpeg,image/webp,image/gif,image/avif,image/svg+xml,application/pdf,video/mp4,audio/mpeg,audio/aac,application/json | the accepted file types |
| is_multiselect | boolean | false | if true, the file input accepts multiple files |
| is_disabled | boolean | false | disables file input if true |
| border_radius | number | 2 | border radius in rem for the drop zone |
| height | string | height (e.g., '200px') of the drop zone; if null, auto-sizes | |
| icon_color | string | var(--primary-t) | color for the drop zone icon |
| border_color | string | aabbccff | hex color used for the dashed border |
| is_drop_zone | boolean | true | if true, enables drag-and-drop area |
| is_hide_drop_zone_if_file | boolean | true | if true and a file is already selected, hides the drop zone |
| ml | number | 0 | margin-left in rem |
| mr | number | 0 | margin-right in rem |
| mt | number | 0 | margin-top in rem |
| mb | number | 0 | margin-bottom in rem |
| select_file_button_text | string | custom text for the 'select file' button | |
| on_get_file | function | callback when a file is selected or dropped; receives val | |
| on_clear_files | function | callback when files are cleared by the user |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | initializes the file input manager and supporting managers (icon, buttons, etc.) | config: object | void |
| get_file | handles the <input type='file'> onchange event, sets val, and calls on_get_file if provided | e: event | void |
| drop_handler | handles drag-and-drop events, sets val for accepted file types, populates error_message otherwise | ev: event | void |
| clear_files | clears the currently selected file(s) and calls on_clear_files if provided | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique id for this file input instance |
| val | any | the currently selected file or an array of files |
| name | string | the name attribute of the underlying file input |
| label | string | label text displayed above the file input |
| is_required | boolean | true if the field is required |
| is_read_only | boolean | true if file input is read-only |
| accept | array | file type strings that are acceptable |
| is_multiselect | boolean | true if multiple files can be selected |
| is_disabled | boolean | if true, the file input is disabled |
| border_radius | number | border radius (rem) for the drop zone |
| height | string | custom height (e.g. '200px') for the drop zone |
| icon_color | string | the color used for the file drop icon |
| border_color | string | the color used for the dashed border |
| is_drop_zone | boolean | enables drag-and-drop if true |
| is_hide_drop_zone_if_file | boolean | hides drop zone if a file is already selected |
| ml | number | margin-left in rem |
| mr | number | margin-right in rem |
| mt | number | margin-top in rem |
| mb | number | margin-bottom in rem |
| select_file_button_text | string | custom text for the 'select file' button |
| error_message | string | shows errors if a dropped file does not match accepted types, etc. |
| svg_bg | string | background-image dataurl for the dashed border overlay |
| error_button_manager | object | button manager to dismiss the displayed error message |
| clear_files_button_manager | object | button manager to clear the currently selected file(s) |
| file_drop_icon_manager | object | icon manager for the displayed file drop icon |
