Upload files and images in mobile apps

Learn how to upload files and images in mobile apps.

Retool provides a number of components that enable users to upload files and images in mobile apps:

• File Input
• Image Input

These components have several configuration options that allow you to control what users can upload.

The maximum supported file size for file uploads is 40MB.

Add file upload functionality

Add a File Input component to the canvas. This enables users to upload files from the mobile app.

Accepted file types

Use the File types option to specify the MIME types to allow for upload. Retool provides three categories of file types from which you can select.

Documents

The Documents option contains a list of MIME types for common file types, such as PDFs and Microsoft Word documents.

[
  "text/*",
  "application/*",
  "application/pdf",
  "application/msword",
  "application/vnd.ms-excel",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  "application/json",
  "application/rtf",
  "application/xml"
]

Images

The Images option allows the upload of all images that use the ['image/*'] MIME type.

Any

The Any option uses ['*/*'] as the specified MIME type, allowing for the upload of any file.

You can provide your own list of MIME types to accept. Click the button and specify an array of MIME type values.

Add image upload functionality

Add an Image Input component to the canvas. This button enables users to select an image to upload.

Input method

You can configure the Image Input component's Input method option to specify whether users can upload images from their device's photo library, capture and upload images with the camera, or allow the user to choose.

Resolution

To reduce file size and improve performance, Retool can scale images during upload. Select Low, Medium, or High to specify the resolution size to use. You can also prevent resolution changes with Original.

Compress photos

Retool can also compress images for file size and performance. Enabling this option results in images that are 50% smaller in size but with minimal loss of quality.

Single or multiple selection

You can specify whether users can upload a single image or multiple images.

If you allow multiple images, you can also specify a minimum or maximum number of images to allow.

Reference uploaded file and image data

Reference file data

Uploaded files are Base64-encoded. The File Input component's value property contains a Base64-encoded string of the file. You can reference Base64-encoded values anywhere in Retool that accepts a string value, including URLs. For example, you can set the URL of an Image component to {{ fileInput1.value }} to display an uploaded image.

The file property is an object with more information about the uploaded file.

Name	Type	Description
lastModified	number	The last modified date of the file, formatted as a Unix timestamp.
name	string	The name of the file.
size	number	The size of the file, in bytes.
type	string	The MIME type of file.
uri	Base64 string	The Base64 string encoding of the file.

Reference image data

The Image Input component temporarily saves captured data as blobs with blob: or file:// URI strings. You can reference this blob elsewhere in your app (e.g., to preview in an Image component) or upload captured images to a data store.

You can use utils.getDataByObjectURL() to convert blobs into a Base64-encoded string for other uses.

The Image Input component's value contains an array of blob: or file:// values, as the component supports multiple selections. The files property is an object with more information about the uploaded images. value is always an array, regardless of whether a user uploads a single file or multiple images. Single-image uploads are accessible using value[0].

Name	Type	Description
size	number	The size of the file, in bytes.
height	number	The height of the image, in pixels.
type	string	The MIME type of file.
uri	string	The blob: or file:// blob.
width	number	The width of the image, in pixels.

Save uploaded files and images

You can reference value in queries to store files in a data store, such as Retool Storage or Amazon S3.

You can enable the Upload file to Retool Storage option for the component to automatically store the file in Retool Storage.