Skip to main content

Upload files and images in web apps

Learn how to upload files and images in web apps.

Retool provides a number of components that enable users to upload files in web apps:

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 one of these components to the canvas. This enables users to upload files from the web app.

Accepted file types​

Use the File types option to specify an array of MIME types to allow for upload. The following examples are for common use cases.

The following list contains MIME types for commonly used files, 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"
]

Single or multiple selection​

You can specify whether users can upload a single file, multiple files, or a directory of files. If you allow multiple files, you can also specify a minimum or maximum number of files to allow.

Parse text files​

Retool can parse uploaded text files and make the content available for use in the app. Enable the Parse files option in the Inspector.

When enabled, the component's parsedValue property contains an array of strings for parsed text. The index of each item corresponds to the index of the uploaded file in value.

Reference uploaded file data​

Uploaded files are Base64-encoded. The component's value property contains an array of objects that correspond to uploaded files with the following schema.

name​

string

The name.

type​

string

The type of content or action to perform.

sizeBytes​

number

The value.

value is always an array, regardless of whether a user uploads a single file or multiple files. Single-file uploads are accessible using value[0].

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[0] }} to display an uploaded image.

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.