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.

DisabledEvent handlersHiddenShow on desktopShow on mobileMake file public on uploadLabelInput methodMaintain space when hiddenMarginMax itemsMin itemsPlaceholderResolutionSelection typeCompress photosReplace file with same nameAlways show in edit modeStylesHelper textUpload file to Retool StorageValue

Demo

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

boolean

Whether the camera was in use.

---

disabled

boolean

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

---

events

object[]

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

Properties

event

enum

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 true.
false	A user sets the value to false.
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

enum

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

---

type

enum

The type of action to perform.

Values

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

---

---

files

Deprecated

object[]

A list of metadata from the selected files. Includes name, type, size, and lastModified.

---

global

boolean

Whether the object is globally scoped for use in all app pages.

---

hidden

boolean

Whether the component is visible.

---

id

string

The unique identifier.

---

isHiddenOnDesktop

boolean

Whether the component is visible in the desktop layout.

---

isHiddenOnMobile

boolean

Whether the component is visible in the mobile layout.

---

isPublic

boolean

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

---

label

string

The text label to display.

---

launchMode

enum

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

boolean

Whether the library was in use.

---

maintainSpaceWhenHidden

boolean

Whether the component takes up space on the canvas if hidden is true.

---

margin

enum

The amount of margin to render outside.

Values

4px 8px	Normal margin.
0	No margin.

---

maxCount

number

The maximum number of items to allow.

---

minCount

number

The minimum number of items to allow.

---

placeholder

string

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

---

pluginType

string

The plugin type.

---

resolution

enum

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

enum

The type of file selection.

Values

single	Select a single file.
multiple	Select multiple files.
directory	Select a directory of files.

---

shouldCompress

boolean

Whether to compress images. If enabled, file size is reduced by 50% with minimal reduction in quality.

---

shouldOverwriteOnNameCollision

boolean

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

---

showInEditor

boolean

Whether to remain visible in the editor if hidden is true.

---

style

object

Custom style options in use. Not all style options may be available for all components.

---

tooltipText

string

The tooltip text to display.

---

uploadToRetoolStorage

boolean

Whether to upload a file to Retool Storage.

---

value

string[]

The value.

---

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

disabled

boolean

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

---

---

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.

---