The Image Input component for Retool Mobile
An input field to select images or take a photo with the camera.
Captured images are temporarily stored on the device for native apps and in the Retool organization for web apps.
Settings
Image Input includes the following configurable options when building apps in the IDE.
Properties
All properties for Image Input with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
cameraOpened
Whether the camera was in use.
A list of metadata from the selected files. Includes name
, type
, size
, and lastModified
.
global
Whether the object is globally scoped for use in all app pages.
Whether the component is visible.
id
The unique identifier.
isHiddenOnDesktop
Whether the component is visible in the desktop layout.
isHiddenOnMobile
Whether the component is visible in the mobile layout.
launchMode
The input method to use.
Values
libraryOpened
Whether the library was in use.
maintainSpaceWhenHidden
Whether the component takes up space on the canvas if hidden
is true
.
placeholder
The text to display within the input field when there is no value.
pluginType
The plugin type.
resolution
Whether to resize images to a different resolution.
Values
selectionType
The type of file selection.
Values
shouldCompress
Whether to compress images. If enabled, file size is reduced by 50% with minimal reduction in quality.
Whether to replace a file with the same name when uploading with Retool Storage.
showInEditor
Whether to remain visible in the editor if hidden
is true
.
tooltipText
The tooltip text to display.
uploadToRetoolStorage
Whether to upload a file to Retool Storage.
Methods
JavaScript API methods for interacting with Image Input. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
clearValue
Clear the current values.
imageInput.clearValue()
close
Close the component.
imageInput.close()
open
Open the component.
imageInput.open()
resetValue
Reset the current value to the default value.
imageInput.resetValue()
setDisabled
Set the disabled
value to toggle whether the input field is disabled. Defaults to true
without a parameter.
imageInput.setDisabled(disabled)
Parameters
Events
Events are triggered by user interactions, such as clicking a button or entering a value. Use event handlers to trigger queries or other actions in response to events.
capture
A value is captured.
close
The component is closed.
open
The component is opened.