Skip to main content

Interact with files

Learn how to store and retrieve files on data stores.

You can add components that allow users to upload files in web apps and mobile apps. You can also query data stores, such as Retool Storage or Amazon S3, to save or retrieve files.

Reference user-uploaded files in apps​

How you reference user-uploaded files differs depending on whether you're using web or mobile apps.

Files that users upload 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 of the file.

type
string

The MIME type of file.

sizeBytes
number

The size of the file, in bytes.

value
array

An array of Base64-encoded strings that represent each uploaded file's data.

url
array

The URL of the file.

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

Uploaded files are Base64-encoded. The 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, using {{ query.data.base64data }}.

For component properties without built-in image fields, such as the Prefix image of a List View component, use the data: prefix and include the MIME type. For example:

data:image/png;base64,{{uploadedImageQuery.data.base64Data}}

Set Prefix image of List View to use Retool Storage query results

Interact with files on data stores​

You can create, retrieve, and modify files on Retool Storage or any other connected data store resource, such as Amazon S3.

You can write queries to save and retrieve files on Retool Storage.

Save files to Retool Storage​

Save files directly to Retool Storage

Enable the Upload file to Retool Storage option for supported upload components, such as File Button, to automatically store the file in Retool Storage without the need for a separate query.

Use the Upload file action to upload files to Retool Storage. If your app has a supported component for uploads, you can select it from the File source dropdown. Retool then saves the uploaded file.

In some cases, you may need to reference Base64-encoded data instead of a component, such as data returned by another query.

Click the button to enable more granular options. You can then specify the File content, a Base64-encoded string, and the file name to use.

In Retool Workflows, use the File content field to set your file content, and give the file a unique name. You can also use JavaScript to dynamically set the file name—for example, {{ 'report-' + new Date().toDateString() + '.csv' }}.

List all files on Retool Storage​

Use the Get a list of file metadata action type to retrieve metadata about the files your organization has uploaded to Retool Storage. The list includes file names, IDs, sizes, types, URLs, and created and modified dates.

Retrieve a file from Retool Storage​

Query the Retool Storage resource to retrieve saved files. Set the Action type to Get contents of a file and select the file to retrieve.

Retool file objects, such as files stored in Retool Storage, have the following schema:

name
string

The name of the file.

id
number

The unique ID of the file.

type
string

The MIME type of file.

sizeBytes
number

The size of the file, in bytes.

base64Data
string

The Base64 string encoding of the file.

url
string

The URL of the file.

Some components, such as Image and PDF, have built-in support for files on Retool Storage. Select Storage as the Source and then select the file to use.

Download files from Retool Storage​

In web and mobile apps, write queries using the Download a file action type to download a file to the user's browser. You cannot download files in Retool Workflows.

Delete files on Retool Storage​

Delete files by writing queries using the Delete a file action type. Select a file by its name, or pass in its ID.

Manage files on Retool Storage​

To view all your uploaded files, change file access levels, and manually upload, download, move, or delete files, go to Resources > Retool Storage, or directly to your-org.retool.com/files. By default, uploaded files are accessible to users in the organization which hosts the file. Select ... > Make public to make files publicly accessible.

Upload and view all files on the Retool Storage home page

You can also view file IDs and URLs from this page. You can use IDs in Retool Storage queries, and URLs in Image and PDF components in apps.

Fetch files using a URL​

Remote files must be accessible

The remote file must be publicly accessible and not subject to CORS policies. If the file is stored in a remote data store to which you have access, consider creating a resource instead.

In some cases, you may need to fetch a file from a remote URL, such as an image. You can write a query to retrieve the remote file and use it within your app.

  1. Add a query and select the RESTQuery resource.
  2. Select the GET action and provide the URL to the remote file.

If the remote file is binary data, Retool makes it available as a file object with the same schema as Retool Storage files. You can reference {{ query.data.base64Data }} to use the Base64-encoded data. Plain text content is not encoded.

The following example retrieves Retool's GitHub organization image.

GET https://github.com/tryretool.png