Using Supabase for image upload

How do I do X?
1

Hi,

I am using Supabase for my DB and it works perfect. Now i want to implement supabase file storage to my app but i couldn’t do it.

Only tutorial is with AWS, is there any “how to do guide” or anyone tried that before?

export default {
async uploadSupabase () {
// use async-await or promises

	const client = supabase.createClient('link', 'token')

const {data ,error} = await client.storage.from('game').upload(FilePicker1.files[0].data, "avatarFile")
console.log(data, error)
}

}

2

Hello there!

To upload files to Supabase from Appsmith, you can use the Filepicker widget and create a custom API to interact with Supabase Storage. Here’s how you can do it

  1. Add a Filepicker widget to your Appsmith app by dragging and dropping it onto the canvas. Make sure the Data Format property is set to the desired format (e.g., Binary, Text, Base64, or Array (CSV)).
  2. Create a new API in Appsmith by clicking on the + icon next to the APIs section. Use the Supabase REST API to interact with Supabase Storage. You can find the API documentation here (Supabase Javascript Client).
  3. Configure the API with the necessary headers, including the apikey and Authorization headers. You can find these values in your Supabase dashboard under the API section.
  4. Set the API method to POST and construct the URL to upload the file to Supabase Storage. The URL should look like this: https://<your-supabase-project>.supabase.co/storage/v1/object/public/<bucket-name>/<file-path> .
  5. In the Body section of the API configuration, add the file data from the Filepicker widget using the following code:
{{ FilePicker1.files[0].data }}

Here, FilePicker1 is the name of your Filepicker widget, and [0] represents the index of the file.
6. Bind the API to the Filepicker widget’s onFileUploaded event or another trigger (e.g., a button click) to execute the API when needed.

By following these steps, you should be able to upload files to Supabase from Appsmith using the Filepicker widget and a custom API.

3

Let me know if you have any troubles following the above highlighted steps

4

Thanks for the help. I can’t do it :S i am now using blob and adding it to table, which solved my issue for now.

5

What part did you get stuck on @Ozgur?