The File Button component for Retool Apps
A button to select single or multiple files.
Refer to the File inputs guide for more information on how to use this component.
Properties
All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
accept
A list of file extensions or file-type specifiers to accept.
Type | array | ||||
Array values | string | ||||
Mutability |
|
Examples
["image/*", "pdf", "doc"]
appendNewSelection
Whether to append additional files to the value.
Type | boolean | ||||
Mutability |
|
disabled
Whether input, interaction, selection, or triggering is disabled.
Type | boolean | ||||||
Format | True/False | ||||||
Mutability |
| ||||||
Default |
|
Examples
true
Array Object Properties
Examples
1617024000000
iconAfter
The suffix icon to display.
Type | string | ||||
Format | Icon Key | ||||
Mutability |
| ||||
Default |
|
Examples
/icon:bold/shopping-gift
iconBefore
The prefix icon to display.
Type | string | ||||
Format | Icon Key | ||||
Mutability |
| ||||
Default |
|
Examples
/icon:bold/shopping-gift
isPublic
Whether to make the file public when uploading with Retool Storage.
Type | boolean | ||||
Mutability |
|
loaderPosition
The position of the loading indicator if loading
is true
.
Type | string | ||||||||||
Mutability |
| ||||||||||
Allowed Values |
| ||||||||||
Default |
|
loading
Whether to display a loading indicator.
Type | boolean | ||||
Format | True/False | ||||
Mutability |
| ||||
Default |
|
Examples
true
parseFiles
Whether to parse plain-text content.
Type | boolean | ||||
Mutability |
|
selectionType
The type of file selection.
Type | string | ||||||||
Mutability |
| ||||||||
Allowed Values |
|
shouldOverwriteOnNameCollision
Whether to replace a file with the same name when uploading with Retool Storage.
Type | boolean | ||||
Mutability |
|
style
Custom style options.
Type | object | ||||
Mutability |
|
styleVariant
The style variant to use.
Type | string | ||||||
Format | Plain Text | ||||||
Mutability |
| ||||||
Allowed Values |
| ||||||
Default |
|
Examples
solid
text
The primary text content.
Type | string | ||||
Format | Plain Text | ||||
Mutability |
|
Examples
Submit
uploadToRetoolStorage
Whether to upload a file to Retool Storage.
Type | boolean | ||||
Mutability |
|
Methods
JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
fileButton.clearValidation()
Clear the validation message from the input field.
fileButton.clearValidation()
Examples
Clear the validation message from fileButton
.
fileButton.clearValidation();
fileButton.clearValue()
Clear the current values.
fileButton.clearValue()
Examples
Clear the current value of fileButton
.
fileButton.clearValue();
fileButton.focus()
Set focus on the input field.
fileButton.focus()
Examples
Set focus on fileButton
.
fileButton.focus();
fileButton.resetValue()
Reset the current value to the default value.
fileButton.resetValue()
Examples
Reset the current value of fileButton
.
fileButton.resetValue();
fileButton.scrollIntoView()
Scrolls the canvas or parent container so that the selected component appears in the visible area.
fileButton.scrollIntoView(options)
Parameters
Object Properties
behavior
The scroll behavior.
Type | string | ||||||
Allowed Values |
|
block
The scroll position relative to the component.
Type | string | ||||||||||
Allowed Values |
|
Examples
Scroll the minimum amount to immediately bring fileButton
into view.
fileButton.scrollIntoView({behavior: 'auto', block: 'nearest'});
fileButton.setDisabled()
Set the disabled
value to toggle whether the input field is disabled. Defaults to true
without a parameter.
fileButton.setDisabled(disabled)
Parameters
disabled
Whether input, interaction, selection, or triggering is disabled.
Type | boolean |
Format | True/False |
Default |
|
Examples
true
Examples
Disable fileButton
.
fileButton.setDisabled(true);
Enable fileButton
.
fileButton.setDisabled(false);
fileButton.setHidden()
Set the hidden
value to toggle whether the component is visible. Defaults to true
without a parameter.
fileButton.setHidden(hidden)
Parameters
Examples
true
Examples
Hide fileButton
.
fileButton.setHidden(true);
Unhide fileButton
.
fileButton.setHidden(false);
fileButton.validate()
Validates the value of the input field.
fileButton.validate()
Examples
Validate the value of fileButton
.
fileButton.validate();
Events
Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.
Event | Description |
---|---|
Change | The value is changed. |
Parse | Data is parsed. |