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.