Skip to main content

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.

DisabledEvent handlersShow 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.

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. Refer to the events section for a list of supported events.

method​

enum

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

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.

​

boolean

Whether the component is visible.

id​

string

The unique identifier.

Whether the component is visible in the desktop layout.

Whether the component is visible in the mobile layout.

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

label​

string

The text label to display.

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.

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

The amount of margin to render outside.

Values
4px 8px

Normal margin.

0

No margin.

The maximum number of items to allow.

The minimum number of items to allow.

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

pluginType​

string

The plugin type.

Whether to resize images to a different resolution.

Values
original

Images retain their original resolution.

high

High resolution.

medium

Medium resolution.

low

Low resolution.

The type of file selection.

Values
single

Select a single file.

multiple

Select multiple files.

directory

Select a directory of files.

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.

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.

The tooltip text to display.

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

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.