Retool + Supabase, how to post to object storage with API?

I would like to upload file from Retool to Supabase Storage through the REST API.

This is the tip from the Supabase side, I m trying to figuring how to get "readmeStream" from Retool side.

I try to set the content as "Raw" before but it won't work, it become something like this https://gjuucwcqgeylbnvjaolz.supabase.in/storage/v1/object/public/test/170161225_4457665517584932_542165625088410652_n.jpg

I try to set the content as "Binary", but getting error like this "The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined"

Screenshot for how I set for Raw.
Screenshot for how I set for Binary

please let me know what need to be done to fix this?

anyone can help for this?

Hey knight, sorry for the delay on this. As you mentioned, the new file button stores the file meta data separately from the file data itself. Stitching them together will avoid the "The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined" error.

We are looking into this, and will update everyone when we have a solution.

Have you found a solution to this yet?

Yeah, I wrote a post about it Upload Files To Supabase Storage using Retool
Basically you need to merge the value before posting

@knight Thank you for creating a blog post to explain this. I can't get it to work yet so maybe you have advice for me. This is what I did.

  for (let i = 0 ; i < fileButton1.files.length; i++) {
    let x = { data: fileButton1.value[i],...fileButton1.files[i] }
    ApiUploadFile.trigger({additionalScope: { i: i, d: x}})
  }
}
return go()

Now, when I upload and Image I get the error message:

Cannot destructure property 'data' of 'base64Data' as it is null.

Do you have any tips?
Maybe @joeBumbaca ?

Thanks!

I simplified my upload button and now it is working.
In the tutorial of @knight I see this POST URI storage/v1/<bucket>/<folder>/{{fileButton1.files[i].name}}?
This should be storage/v1/object/<bucket>/<folder>/{{fileButton1.files[i].name}}
The path "object" was missing.

The is optional btw.

I also removed the runQuerySingle or any other transformers.
Just place this in the Body > Form Data > File
{{ fileButton1.value }}
No need to adjust this data. It just works like this.

Also make sure that your policies on your Supabase storage allow uploads.