Need some help in setting up Supabase storage API endpoint | Appsmith | Page 1

stone stump Dec 5, 2022, 5:39 PM

#

I keep getting this error about the route not being found but the bucket exists. I am not sure where I am making a mistake. I can share more info if it is required.

midnight coralBOT Dec 5, 2022, 5:59 PM

#

Hi There!
Thanks for reaching out to us. One of our engineers will be with you shortly.

If you are stuck with an issue/error, please help us with following information.

Which version of Appsmith are you on?
Provide screenshots/screen recordings of the original error/code snippet.
Add details about your use case and provide steps to reproduce the issue, if
possible.

stone stump Dec 5, 2022, 6:04 PM

#

I am on the latest cloud version
Screenshot is already attached
I am not able to figure out the exact correct way of setting up the REST API endpoint for Supabase Storage. I have attached a screenshot of my current approach.

wooden crest Dec 5, 2022, 7:48 PM

#

Hi @stone stump, I'm here to help you. Could you please tell me which database your API uses?

stone stump Dec 5, 2022, 7:48 PM

#

wooden crest Hi <@478529330171871252>, I'm here to help you. Could you please tell me which d...

Supabase

#

i.e. Postgres

#

But here I am only setting up the storage

wooden crest Dec 5, 2022, 7:49 PM

#

Perfect thanks, I will reproduce this problem in my local environment to be able to help you appropriately. 😃

stone stump Dec 5, 2022, 7:50 PM

#

No problem. This is the only documentation that I have found. Might help you in setting it up.https://supabase.github.io/storage-api/#/

wooden crest Dec 5, 2022, 7:52 PM

#

Thanks a lot!

wooden crest Dec 5, 2022, 8:13 PM

#

Hello @stone stump , could you please share the complete error message in the previous capture, it is cut off.

stone stump Dec 5, 2022, 8:14 PM

#

wooden crest Dec 5, 2022, 8:14 PM

#

Thanks

#

Could you press the debug button and show me that information?

stone stump Dec 5, 2022, 8:18 PM

#

Weirdly, I am getting a different error now.

#

wooden crest Dec 5, 2022, 8:19 PM

#

I see that.

stone stump Dec 5, 2022, 8:19 PM

#

That wasnt the error a couple hours back.

wooden crest Dec 5, 2022, 8:20 PM

#

Could you increase the waiting time?

stone stump Dec 5, 2022, 8:20 PM

#

Okay

wooden crest Dec 5, 2022, 8:20 PM

#

stone stump Dec 5, 2022, 8:21 PM

#

Changed it to 20s and I am still getting the same thing.

wooden crest Dec 5, 2022, 8:21 PM

#

we could try with 50s

stone stump Dec 5, 2022, 8:23 PM

#

Trying now

wooden crest Dec 5, 2022, 8:23 PM

#

Perfect!

stone stump Dec 5, 2022, 8:23 PM

#

Still getting the same error but with 50k ms

wooden crest Dec 5, 2022, 8:24 PM

#

Thank you, I will continue to investigate this in my local environment to give you an answer.

stone stump Dec 5, 2022, 8:24 PM

#

Okay

wooden crest Dec 5, 2022, 8:43 PM

#

Could you please show me the configuration of your API?

stone stump Dec 5, 2022, 8:53 PM

#

Which part do you need to see?

#

Headers

#

Body

wooden crest Dec 5, 2022, 8:53 PM

#

the configuration of your data source.

stone stump Dec 5, 2022, 8:54 PM

#

#

Data source

wooden crest Dec 5, 2022, 8:58 PM

#

Thanks!!

stone stump Dec 5, 2022, 9:05 PM

#

@wooden crest This might help as well: https://imknight.com/upload-files-to-supabase-storage-using-retool

I'm Knight

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 Supabas...

wooden crest Dec 5, 2022, 9:06 PM

#

Thank you, I managed to replicate your problem. I am investigating the cause of it. The documents that you send me are very helpful!

stone stump Dec 5, 2022, 9:09 PM

#

Okay. I might be offline for the next several hours as it is pretty late for me. If you need anything else, do let me know. I will reply in the morning. And hopefully you would have found the cause by then as well.

wooden crest Dec 5, 2022, 9:10 PM

#

Perfect, good night.

wooden crest Dec 5, 2022, 9:57 PM

#

Hello @stone stump, I have a solution for your problem, I share a video to show you the correct configuration to generate this query.
Please tell me if this worked for you 😃

#

Let me provide you with the URL.

/object/<<yourbucketname>>/{{FilePicker1.files[0].name}}

stone stump Dec 5, 2022, 10:04 PM

#

I will try this in the morning now but I suppose that if it works for you, it will work for me too.

The only difference I see is the use of object in the url and having the key three times in the data source which is especially weird.

wooden crest Dec 5, 2022, 10:05 PM

#

stone stump Dec 5, 2022, 10:05 PM

#

Oh yeah this too

wooden crest Dec 5, 2022, 10:05 PM

#

stone stump I will try this in the morning now but I suppose that if it works for you, it wi...

If something strange but it is what supabase needs.

#

I show you how I found out

stone stump Dec 5, 2022, 10:06 PM

#

Yeah I suppose. I'll give it a try tomorrow morning.

wooden crest Dec 5, 2022, 10:09 PM

#

I will be attentive to see if it worked, is it is not the case I will be happy to help you.

stone stump Dec 5, 2022, 10:13 PM

#

That's such a clever way of reverse engineering the url. Thanks for the help. I'll try it and let you know if I have any issues or not.

wooden crest Dec 5, 2022, 10:13 PM

#

Thanks!

stone stump Dec 6, 2022, 6:47 AM

#

@wooden crest I am getting this error. As far as I know, I should not have to provide the JWT token when I am already providing the API key.

wooden crest Dec 6, 2022, 2:10 PM

#

Hi @stone stump, Could you show me the configuration of the data source, please?

stone stump Dec 6, 2022, 2:11 PM

#

I have the same apiKey as the Bearer token as well

wooden crest Dec 6, 2022, 2:12 PM

#

Could you show me all the settings like you did yesterday? please

stone stump Dec 6, 2022, 2:13 PM

#

wooden crest Could you show me all the settings like you did yesterday? please

Of the POST api?

wooden crest Dec 6, 2022, 2:13 PM

#

Yes

stone stump Dec 6, 2022, 2:13 PM

#

#

#

The name of the file shouldn't matter by the way.

#

I get the same response with {{FilePicker.files[0].name}} anyway

wooden crest Dec 6, 2022, 2:16 PM

#

Could you show me a screenshot of your Supabase panel like this, please?

#

stone stump Dec 6, 2022, 2:17 PM

#

wooden crest Dec 6, 2022, 2:21 PM

#

Could you put this URL.

/object/workflow-files/qwerty.csv

stone stump Dec 6, 2022, 2:22 PM

#

where?

wooden crest Dec 6, 2022, 2:23 PM

#

stone stump Dec 6, 2022, 2:24 PM

#

wooden crest Could you put this URL. `/object/workflow-files/qwerty.csv`

Oh I tried that initially. then I tried making a public bucket called test and it didnt work with that as well.

wooden crest Dec 6, 2022, 2:26 PM

#

Ok, look, let's do a test, can you help me?

stone stump Dec 6, 2022, 2:27 PM

#

Sure

wooden crest Dec 6, 2022, 2:28 PM

#

I will pass you the credentials of this instance that I create from supbase.

#

/object/appsmithfiles/{{FilePicker1.files[0].name}}

stone stump Dec 6, 2022, 2:28 PM

#

Okay

wooden crest Dec 6, 2022, 2:28 PM

#

wooden crest /object/appsmithfiles/{{FilePicker1.files[0].name}}

#

A moment before doing the tests, you could put apikey first and then authorization

#

stone stump Dec 6, 2022, 2:30 PM

#

Okay

wooden crest Dec 6, 2022, 2:30 PM

#

Before saving the data source you must rewrite the bearer token.

stone stump Dec 6, 2022, 2:31 PM

#

What is your apiKey?

wooden crest Dec 6, 2022, 2:33 PM

#

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ic3FtcGNmdHh1bnJsdWdsdnpmIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzAyNzAyNzcsImV4cCI6MTk4NTg0NjI3N30.AQYCpMvA4syM_cmOWK8coTlfnnS0jtuC_4uIw34uoZs

stone stump Dec 6, 2022, 2:35 PM

#

This is with your URL, your api key as apiKey and your api key as Bearer Token in the data source.

#

This is after using your api key as authorization as well in the data source header

wooden crest Dec 6, 2022, 2:37 PM

#

Could you add [email protected] to your workspace? In order to review this better.

stone stump Dec 6, 2022, 2:37 PM

#

Ignore the last one. I forgot to reenter the bearer token

#

stone stump Dec 6, 2022, 2:37 PM

#

wooden crest Could you add `[email protected]` to your workspace? In order to review this ...

Okay sure

#

Added. The app is called Workflow tracker

wooden crest Dec 6, 2022, 2:57 PM

#

@stone stump , could you please send me your key and your URL? It can be private.

stone stump Dec 6, 2022, 2:57 PM

#

Okay

wooden crest Dec 6, 2022, 2:58 PM

#

stone stump Dec 6, 2022, 3:00 PM

#

Done

wooden crest Dec 6, 2022, 3:22 PM

#

Could you load a file from the dashboard and show me the network like in this image please.

#

Could you share the JWT token privately?

stone stump Dec 6, 2022, 4:06 PM

#

@wooden crest Any luck?

wooden crest Dec 6, 2022, 4:07 PM

#

I find myself investigating.

stone stump Dec 6, 2022, 4:07 PM

#

Okay. Let me know if you need anything else?

wooden crest Dec 6, 2022, 4:08 PM

#

Perfect

#

Could you copy this and send it to me please?

#

stone stump Dec 6, 2022, 4:20 PM

#

isnt it the same as the apiKey I sent?

wooden crest Dec 6, 2022, 4:22 PM

#

Don't, compare them and they look different.

stone stump Dec 6, 2022, 4:22 PM

#

Yeah I just noticed

#

That is weird

#

btw, sent it thru DM

wooden crest Dec 6, 2022, 4:23 PM

#

stone stump That is weird

Yes

stone stump Dec 6, 2022, 4:24 PM

#

I checked it just now

#

The api key that I am using in appsmith is the anon public key

#

The one that appears in the browser inspector is service_role secret

wooden crest Dec 6, 2022, 4:25 PM

#

It works now you can try it, the problem was the token. I think the supabase platform bugged you.

wooden crest Dec 6, 2022, 4:26 PM

#

stone stump The one that appears in the browser inspector is `service_role` `secret`

If that is the one that is necessary to include in the authentication and in the header.

#

Could you confirm that this already works for you?

stone stump Dec 6, 2022, 4:28 PM

#

Yes I just checked. It is working now.

One other question: In the supabase dashboard, it says that the file type is application/json. Would that not affect me if I want to query ALL pdfs or pngs or whateever?

wooden crest Dec 6, 2022, 4:29 PM

#

No, in general, this does not affect or should not affect, you could upload a couple of files for you to check

stone stump Dec 6, 2022, 4:30 PM

#

I just did. All get uploaded with the type application/json

wooden crest Dec 6, 2022, 4:30 PM

#

Perfect!

#

I'm glad I was able to help you with this issue, have a great week.

#

@stone stump Could you please delete the screenshots where your keys appear

stone stump Dec 6, 2022, 4:38 PM

#

Done. Also, share the exact set of settings that you used to set up the connection to Supabase storage so that future users can reference this convo.

wooden crest Dec 6, 2022, 4:39 PM

#

That's a great idea, I'm going to do it!

wooden crest Dec 6, 2022, 5:54 PM

#

https://github.com/felix-appsmith/How-to-connect-supabase-storage-appsmith/blob/main/README.md

GitHub

How-to-connect-supabase-storage-appsmith/README.md at main · felix-...

Document explaining in detail how to make a connection and upload files to supabase storage - How-to-connect-supabase-storage-appsmith/README.md at main · felix-appsmith/How-to-connect-supabase-sto...

young wind Dec 7, 2022, 2:46 AM

#

Hi!

#

I found all this specially helpful, but I need to upload to supabase storage a photo taken from the Camera Widget of appsmith, and I'm not being able to do it

#

The camera widget provides an imageBlobURL, (which can't be fetched since fetch is not allowed in JS methods), and imageDataURL, imageRawBinary, which I think are also not profitable. Any ideas on how to make this work? @wooden crest

midnight coralBOT Dec 7, 2022, 3:18 AM

#

Have you tired passing the blob to the API? I think when we pass blobs to
queries we turn them into base64.

young wind Dec 7, 2022, 3:22 AM

#

I have, but I get an error

midnight coralBOT Dec 7, 2022, 3:24 AM

#

can you send a screenshot?

young wind Dec 7, 2022, 3:26 AM

#

#

it's a get request

midnight coralBOT Dec 7, 2022, 3:28 AM

#

I meant as a param in the supabase insert query

young wind Dec 7, 2022, 3:40 AM

#

You mean in the Supabase Storage API query?

#

The one with this url: supabaseproject.supabase.co/storage/v1/object/bucketName/path

#

In case you mean this url, could you please give me an example of what kind of param should I use to pass the blob url?

midnight coralBOT Dec 7, 2022, 3:54 AM

#

It seems like you would pass the blob url as the path

young wind Dec 7, 2022, 5:20 AM

#

I don't really think that will work 😅 have you tried it?

midnight coralBOT Dec 7, 2022, 5:54 AM

#

@young wind, We discussed this internally. We are already building a
sample app for your use case. We might need a couple of hours but you'll have a
resolution.
Thanks for your patience!

young wind Dec 7, 2022, 10:42 AM

#

Nice, thank you so much! Let me know please 🙂

young wind Dec 7, 2022, 2:26 PM

#

Hi! How is the sample app going? May I help you with anything?

midnight coralBOT Dec 7, 2022, 9:34 PM

#

Hello there. Thank you for your patience.

I have investigated this and came up with a solution for you

#

Hello there. Thank you for your patience.

I have investigated this and came up with a solution for you

young wind Dec 7, 2022, 9:36 PM

#

Nice!

midnight coralBOT Dec 7, 2022, 9:38 PM

#

To be able to upload images directly from the camera, you'll need to use the
name of the image as the last part of your url and in the json body, use the
information as shown in the screenshot as well.

#

#

To be able to upload images directly from the camera, you'll need to use the
name of the image as the last part of your url and in the json body, use the
information as shown in the screenshot as well.

#

young wind Dec 7, 2022, 9:39 PM

#

Iteresting!

midnight coralBOT Dec 7, 2022, 9:40 PM

#

If you want to be able to send image directly from the camera widget, specify a
custom name for the image in the last part of the url (this is the name you'll
see on your supabase bucket) and then use the JSON body as shown in the
screenshot as well

young wind Dec 7, 2022, 11:52 PM

#

Hi

#

Thanks for going though the issue. I have just tried it and it doesn't work for me, I might be missing something, but since we are sending a json body, automatically the content-type header is set to application/json, and when this request is sent, what you get in the supabase storage bucket is not an image, but a json. If I download the file from the bucket, and change the extension to .webp, it just gives a white square. Any ideas?

midnight coralBOT Dec 8, 2022, 3:40 AM

#

Sorry about the issue. I didn't try to open the image after uploading it so,
sorry for that.
I'll look at this issue now and see if I can come up with anything.

If i'm not able to come up with anything, I'll send this back to our tech team
to help you with it but I'll try everything I can to get this issue resolved for
you today.

#

Sorry about the issue. I didn't try to open the image after uploading it so,
sorry for that.
I'll look at this issue now and see if I can come up with anything.

If i'm not able to come up with anything, I'll send this back to our tech team
to help you with it but I'll try everything I can to get this issue resolved for
you today.

young wind Dec 8, 2022, 6:55 AM

#

No worries thanks!

young wind Dec 9, 2022, 2:44 AM

#

My solution has passed by creating a supabase edge function where I send the bucket, the path and the image in base64, so the function converts the base64 data into a blob and adds it to the bucket and path via supabase-js client, and returns the response

#

import { serve } from "https://deno.land/[email protected]/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/[email protected]";

serve(async (req) => {
try {
const supabaseClient = createClient(
Deno.env.get("SUPABASE_URL") ?? "",
Deno.env.get("SUPABASE_ANON_KEY") ?? ""
);

    const { bucket, path, base64 } = (await req.json()) as {
        bucket: string;
        path: string;
        base64: string;
    };
    const imageBlob = await fetch(base64).then((res) => res.blob());
    imageBlob.type;
    const { data, error } = await supabaseClient.storage
        .from(bucket)
        .upload(path, imageBlob, {
            contentType: imageBlob.type,
        });
    if (error) throw error;

    return new Response(JSON.stringify(data), {
        headers: { "Content-Type": "application/json" },
        status: 200,
    });
} catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
        headers: { "Content-Type": "application/json" },
        status: 400,
    });
}

});

midnight coralBOT Dec 9, 2022, 7:23 AM

#

Hi there.
Does this solution work perfectly for your previously reported issue on your
appsmith app?

young wind Dec 9, 2022, 9:02 AM

#

Yes, though it means creating another repo for the function, deploying it, etc, which is a bit of a pain

#

It would be super cool if we could upload it just through the rest api

young wind Dec 12, 2022, 8:41 PM

#

Hi! I showed my product to the client and said the photo upload was too slow...

#

The process of having to call the supabase function in order to upload the file instead of just calling the supabase storage REST API slows it down

#

And also, I finally had to use the file picker widget in order to get the base64 representation of the image, since the camera widget didn't provide me of the photo content, neither in binary nor in base64...

#Need some help in setting up Supabase storage API endpoint