Skip to main content

The File Input component for Retool Mobile

An input field to select single or multiple files.

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
ControlUsage
Retool UI Inspector > content > File types
Examples
["image/*", "pdf", "doc"]

customValidation

A custom validation rule using {{ }} expression with conditional logic. An invalid match evaluates to a string which is used as the validation message. An empty or nullish value is considered valid.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector > Interaction > Validation rules > Custom rule
Examples
"{{ value.length > 5 ? 'Value must be longer than 5 characters' : '' }}"

disabled

Whether input, interaction, selection, or triggering is disabled.

Type boolean
Format True/False
Mutability
ControlUsage
Retool UI Inspector > Interaction > Disabled
MethodsetDisabled()
Default
false
Examples
true

events

A list of configured event handlers that trigger actions or queries.

Type array
Array values object
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers
Array Object Properties

event

The event that triggers the action. Refer to the events section for details of available events for this object.

Type string
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers > Event

method

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type string
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers > Edit event handler > Run script actions

type

The type of action to perform.

Type string
Mutability
ControlUsage
Retool UI Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values
ValueDescription
datasource

Control query.

widget

Control component.

script

Run script.

state

Set variable.

localStorage

Set localStorage.

util

Perform utility action (e.g., Open URL or Confetti).



file

Details about the selected file.

Type object
Mutability Read-only
Object Properties

lastModified

The last modified date as a timestamp.

Type number
Format Timestamp
Mutability Read-only
Examples
1617024000000

name

The file name with extension.

Type string
Mutability Read-only

retoolStorageId

The file ID if uploaded to Retool Storage.

Type string
Mutability Read-only

size

The file size, in bytes.

Type string
Mutability Read-only

type

The MIME type.

Type string
Mutability Read-only

uploading

Whether the file is uploading.

Type boolean
Mutability Read-only


formDataKey

The key used by a Form component to assign default values to input fields using form.initialData, and to construct the form.data property.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector > Interaction > Form data key
Default
{{ self.id }}
Examples
table1.selectedRow.id

hidden

Whether this object is hidden from view.

Type boolean
Format True/False
Mutability
ControlUsage
Retool UI Inspector > Appearance > Hidden
MethodsetHidden()
Default
false
Examples
true

hideValidationMessage

Whether to hide the validation message if the invalid is true.

Type boolean
Mutability
ControlUsage
Retool UI Inspector > Appearance > Advanced > Hide validation message

invalid

Whether the value has failed any validation rules.

Type boolean
Mutability Read-only

isPublic

Whether to make the file public when uploading with Retool Storage.

Type boolean
Mutability
ControlUsage
Retool UI Inspector

label

The text label to display.

Type string
Format Plain Text
Mutability
ControlUsage
Retool UI Inspector > Content > Add-ons > Label > Label
Default
null
Examples
"Label"

placeholder

The text to display within the input field when there is no value.

Type string
Formatstring
Mutability
ControlUsage
Retool UI Inspector > Content > Placeholder
Default
Enter a value
Examples
Enter a value

required

Whether a value is required to be selected.

Type boolean
Format True/False
Mutability
ControlUsage
Retool UI Inspector > Interaction > Validation rules > Required
Default
false
Examples
true

shouldOverwriteOnNameCollision

Whether to replace a file with the same name when uploading with Retool Storage.

Type boolean
Mutability
ControlUsage
Retool UI Inspector

uploadToRetoolStorage

Whether to upload a file to Retool Storage.

Type boolean
Mutability
ControlUsage
Retool UI Inspector

validationMessage

The validation message to display if invalid is true.

Type string
Format Plain Text
Mutability Read-only

value

A list of files.

Type array
Array values object
Mutability Read-only
Array Object Properties

base64Data

The base64 encoded data of the file.

Type string
Mutability Read-only

sizeBytes

The size of the file in bytes.

Type number
Mutability Read-only

type

The MIME type.

Type string
Mutability Read-only


Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

fileInput.clearValidation()

Clear the validation message from the input field.

Definition
fileInput.clearValidation()
Examples

Clear the validation message from fileInput.

fileInput.clearValidation();

fileInput.clearValue()

Clear the current values.

Definition
fileInput.clearValue()
Examples

Clear the current value of fileInput.

fileInput.clearValue();

fileInput.focus()

Set focus on the input field.

Definition
fileInput.focus()
Examples

Set focus on fileInput.

fileInput.focus();

fileInput.resetValue()

Reset the current value to the default value.

Definition
fileInput.resetValue()
Examples

Reset the current value of fileInput.

fileInput.resetValue();

fileInput.setDisabled()

Set the disabled value to toggle whether the input field is disabled. Defaults to true without a parameter.

Definition
fileInput.setDisabled(disabled)
Parameters

disabled

Whether input, interaction, selection, or triggering is disabled.

Type boolean
Format True/False
Default
false
Examples
true

Examples

Disable fileInput.

fileInput.setDisabled(true);

Enable fileInput.

fileInput.setDisabled(false);

fileInput.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition
fileInput.setHidden(hidden)
Parameters

hidden

Whether this object is hidden from view.

Type boolean
Format True/False
Default
false
Examples
true

Examples

Hide fileInput.

fileInput.setHidden(true);

Unhide fileInput.

fileInput.setHidden(false);

fileInput.setValue()

Sets the value of the file picker.

Definition
fileInput.setValue(value)
Parameters

value

The value.

Type string | number | boolean | object | array

Examples

Set the current value of fileInput to userValue.

fileInput.setValue(userValue);

fileInput.validate()

Validates the value of the input field.

Definition
fileInput.validate()
Examples

Validate the value of fileInput.

fileInput.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.

EventDescription
ChangeThe value is changed.