Skip to main content

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

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.

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.


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.