The Image Input mobile component
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.
Properties
event
The event type.
Values
change | A user changes the value. |
click | A user clicks or taps the component. |
submit | A user submits the value. |
focus | A user selects the input field. |
blur | A user deselects the input field. |
scan | A user scans a barcode. |
open | A user opens the component. |
close | A user closes the component. |
true | A user sets the value to |
false | A user sets the value to |
select | A user selects a value. |
clear | A user clears the value. |
upload | A user uploads a file. |
parse | An uploaded file is parsed. |
inputValueChange | A user changes the value of the input field. |
method
The JavaScript method to perform when type
is datasource
, widget
, state
, or localStorage
.
A list of metadata from the selected files. Includes name
, type
, size
, and lastModified
.
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
camera | Take photos with the device camera or select photos to upload. |
cameraOnly | Take photos with the device camera only. |
libraryOnly | Select photos to upload only. |
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
original | Images retain their original resolution. |
high | High resolution. |
medium | Medium resolution. |
low | Low resolution. |
selectionType
The type of file selection.
Values
single | Select a single file. |
multiple | Select multiple files. |
directory | Select a directory of files. |
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.
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.