Skip to main content

Manage files

Learn how to work with files in Retool queries and components.

In Retool, you can upload and manage files using:

You can similarly download and display files by querying your file store, and display them in components such as Image or PDF. This guide shows how to use components and queries to access files across Retool.

File schema​

Upgrade components

You may need to upgrade your component to see the file schema reflected in the component's value property. This schema was previously split across the files and value properties.

Across Retool, file objects are represented by 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.
base64Data
Base64 string
The Base64 string encoding of the file.

For example, a File Upload component's value property might contain the following object.

{
  "name": "upload.png",
  "type": "image/png",
  "sizeBytes": 6436,
  "base64Data": "iVBORw0KGgoAAAANSUhEUgAAA1gAAAFHCAYAAAC8gO3PAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABi5SURBVHgB7d3NdRzH2Tbg9vd54Z3kCGhGQCECGBGAWHpFMAKQEQCMgGAEJHfekYwAZgQgd97BigBSBHjnHp22IYoA5uepme6e6zrnObSPKKCnamZUd1d11Z"
}

Objects returned from Retool Storage queries using the Get file contents action type include an additional id field.

Populate components from files​

You can populate Image and PDF components with files by setting image or data sources to query results. In the Inspector, select JS as the Image source or PDF source, then set the source to {{ query.data }}.

You can also select Storage as the Image source or PDF source to set the source to a file uploaded to Retool Storage.

Use components to upload files​

In File Upload, File Input, and File Dropzone components, the value field contains the file object after upload.

You can pass this value to queries—for example, those using Retool Storage—that accept file objects.

Pass file objects to queries​

You may need to pass files to REST API POST requests, email or SMTP queries as attachments, or other file handling queries. You can generally pass in query results or component values, since they use a unified file schema, rather than constructing file objects yourself.

REST API queries​

When you upload files using form data in POST requests in REST APIs, you can pass in the entire file object to the File field. For example, to upload the contents of a File Input, you can pass in {{ fileInputName.value }}.

Email queries​

Using Retool Email or other email queries, you can attach files by passing the entire file object into the Attachments field. For example, to attach a file previously uploaded to Retool Storage in a query called uploadFile, you can set the Attachment to {{ uploadFile.data }}.