Skip to main content

Retool Storage tutorial

Learn how to build apps for managing files using Retool Storage.

Retool Storage is a Retool-hosted file store. In this guide, you build an app with the following functionality:

  • Generate a PDF from a Chart component
  • Upload the PDF to Retool Storage
  • Send emails using Retool Email with the Retool Storage file attached

To test out the app yourself, you can download the app as JSON and import it to your organization. See the Retool Storage overview to learn about other ways to use Retool Storage.

1. Add a Chart component​

In the Apps tab, click Create new > App to create an app. Name the app and then click Create app.

To help organize your app, add a Tabbed Container and label the steps Generate PDF, Store PDF, and Send email. Add a Chart component to your app and drag it to the canvas. This app uses sample data, but you can also use your own data to populate the chart.

2. Generate a PDF​

To generate a PDF from components in your app, you can use Retool's build-in utility methods. Create a JavaScript query and enter the following code. Add any additional components you want to include to the componentsToInclude array.

utils.downloadPage("report.pdf", { componentsToInclude: ["chart1"] });

Next, add a Button component to the canvas and update its label to Generate PDF. In the Button's Inspector, attach an event handler to trigger your downloadPage query.

3. Upload a PDF to Retool Storage​

You can upload files to Retool Storage in apps using the File Button, File Input, and File Dropzone components. In the Store PDF tab of your container, add a File Button component.

Next, add a resource query and set the resource to Retool Storage. Set the Action type to Upload file and the File source to your File Button component. Select Make file public on upload to allow the file to be accessed outside of Retool. You can change this later from the Retool Storage resource page (<your-subdomain>.retool.com/files).

4. List uploaded files​

Create another Retool Storage query, rename it to listFiles, and set the Action type to Get a list of file metadata. This retrieves a list of all files uploaded to Retool Storage for your organization, so you may want to filter some files from the list. In this example, the following Transformer filters the list of files to only PDFs.

return data.filter((file) => file.type === "application/pdf");

In the Send email tab, add a Select component. Set the Mode to Mapped, and set its Data source to this query. Update its label to File.

5. Retrieve file contents​

Create another Retool Storage query and rename it to getFileContents. Set the Action type to Get file contents, then set the file name to {{ select1.value }}. File contents retrieved from Retool Storage queries are stored in queryName.data.base64Data.

Attach an event handler to the Select component to trigger getFileContents, so the query retrieves the contents of the selected file.

4. Send emails with file attachments​

Add an Email component to specify the recipient.

Next, add a resource query using Retool Email as the resource. Set the To field to {{ email1.value }}, and fill in the rest of the fields with your desired content. In Attachments, toggle the fx option, and set the field to:

[{data: {{ getFileContents.data.base64Data }}, name: {{ getFileContents.data.name }}, contentType: 'application/pdf'}]

Add a Button component and label it Send, and attach an event handler to the button to trigger sendEmail.

5. Test your app​

Enter a test email and click Send to test your queries. You can also prevent sending emails to invalid addresses by setting the Disabled field of the Send button to {{ !textInput || textInput.validationMessage }}.