<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Tutorial

Add powerful file storage to your Retool app

This tutorial will show how to add our files component to your Retool app, enabling previews of virtually every file format, remote editing of Office files, and support to several cloud storage services.

Have Retool ready, and let's get started.

1. Weavy API key and backend

First, we need an API key to communicate with the Weavy backend.

2. Get access token

For our Weavy component to work, we need an access token from the authentication workflow. 

Go to Code in the left panel, click the + and select Import Workflow

  • Name it getAccessToken
  • Select WeavyRetoolWorkflow from the Select Workflow dropdown
  • Update the Workflow parameters according to the JSON snippet below.
Copy and paste into Workflow paramaters 
{ 
  "uid" : "{{ current_user.sid }}", 
  "fullname" : "{{ current_user.fullName }}", 
  "email" : "{{ current_user.email }}", 
  "avatar" : "{{ current_user.profilePhotoUrl }}" 
}
  • Change the Run behavior to Automatic
  • Click Save & Run
  • If successful, you should see an access token in the output window
workflow2

3. Add custom component

Search for Custom component in the components search bar.

Drag and drop it onto the canvas and do the following in the inspector:

For Content;

  • Remove all code in Model
  • Remove all code in IFrame Code

Check the following for Interaction;

  • Downloads
  • Forms
  • Modals
  • Popups
  • Fullscreen
  • Top-level navigation
  • Storage and cookies
addcustomcomponent

4. Pass access token

This will trigger the workflow, return an access token, and pass it to the custom component. Update Model with;
Modify Model in the inspector - copy and paste this code 
{
  "token" : {{ getAccessToken.data.access_token }},
  "uid" : "retool-files-uid"
}
The model also passes along a UID, which is the unique identifier for the Weavy component. You can use this to dynamically set a UID from a selected row in a table, for example.

5. Add the files component

In the IFrame code for the custom component, we'll initiate the Weavy context and pass the access token to the token factory for authentication.

Once authenticated, we can render the files component from Weavy.

Modify IFrame Code in the inspector - copy and paste this code 
<script src="WY_BACKEND_URL/uikit-web/weavy.js"></script>    
<script>
    const weavy = new Weavy();
    weavy.url = "WY_BACKEND_URL";
    window.Retool.subscribe(function (model) {
      weavy.tokenFactory = model.token ? async (refresh) => model.token : undefined;
      wyFiles.setAttribute('uid', model.uid);
    });
 </script>

<style>
  :root { 
    --wy-theme-color: #3170F9; 
    --wy-border-radius:8px;
    font-family: "Inter var", sans-serif
  }
  html, body { 
    padding: 0px; 
    margin:0px; 
    height:100%;
  }
</style>

<div style="height:100%;display:flex;background:#fff">
    <wy-files id="wyFiles" uid=""></wy-files>
</div>
  • Line 6 - getting the access token from the workflow passed through the model.
  • Line 7 - getting the UID from the model and setting the attribute on the element.
  • Line 25 - rendering the files component.

6. Done!

The Custom Component with the Files component should load instantly - but toggle to Preview mode to see the full experience.

Note that this is fully working now and available for all your users if you want - rich file preview support added, just like that.

retool-files
On this page

There's more

Check out the other tutorials to create group chat, AI prompting, and more.

All tutorials
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account