Upload Files To Supabase Storage using Retool

Upload Files To Supabase Storage using Retool

I recently have a project to help a client build an Admin Interface using Retool to access data in Supabase. I can use both API and SQL queries to do the regular CRUD operation without any problem, but I have stucked on how to upload files to Supabase Storage for weeks. Most of the sample code is make use of SDK, can't find any sample that make use of API.

Finally, through some forum posts, I found out that the Retool upload tools have some minor issues, which need to transform the data to make the upload successful.

I m going to share with you how I resolved the issues.

First, place your upload component on Retool; my solutions work for both kinds of upload components.

2. APIUploadFile - Prepare the API endpoint to post to Supabase

It would be best to have your Supabase Url & Bearer token ready, construct the URL structure like the image with bucket name, the folder name and the file name. fileButtion1 is my upload file input name. The parameter {{d}} is the transform data.

3. runQuerySingle - Create a JS query that will trigger when the upload button trigger.

This snippet works for both single file & multiple file uploads. However, Retool upload feature split the value and file into two separate parameters; you need to merge it back for the API query to work.