Getting URL from Supabase | Storage

Ask us anything How do I?
1

The logic is that a registered user on the Setting page must fill in the required fields and upload one or more images. The images are stored in Storage. After clicking on the Save button, all data is saved in the Profiles table.

To upload files I use Drag&Drop element. The avatarUrl variable with array type is created with it. In it I create the Storage | Upload a file workflow with the following settings:

image
image1132×658 78.6 KB
image
image1147×664 89.8 KB
With this I upload the image to Storage to generate a URL for the image. And it appears there
image
image1237×637 65.4 KB
Here with this address https://utbvryclgdaqprkdhyqh.supabase.co/storage/v1/object/public/avatars/Kira.jpg Next I create a Storage | Retrieve public URL
image
image1144×679 73.6 KB
But the URL is returned with “undefined” and this is the problem.
Next I wanted to change the avatarUrl variable so that the URL would be in Weweb and I could bind it to the avatar_url field and save it in the Profiles table
image
image1117×628 54.2 KB

What am I doing wrong?

2

Friends, does no one know how to solve this problem?

4

@Alexis @Joyce @dorilama @Broberto Maybe you can help me?

5

What did you bind to the path in the retrieve public url action ? It should be Kira.jpg

6

Yes, it should be Kira.jpg, but I get “undefined” from the bucket.

7

Have you tried to rename the picture to kira.jpg and fetch it as so? I have a feeling that this could be an issue of the case getting transformed for some weird reason. Have you tested other pictures/files?

8

From what I understand from your screenshot, you have an action 1 to upload a field, and an action 2 to get the public url of the uploaded file

But you are showing the binding on the action 2 and you bound the result of the action 2 to itself

Instead of binding result->publicurl you have to write “Kira.png”, then execute the action, and in your action 3 you can use the result of action 2

Here you’re binding the result of action 2 in action 2

9

@Broberto Yeah, I’ve tried others. But it looks like Alexis found my mistake.

10

@Alexis Yes, you’re probably right. Only I’m not quite sure how the result->publicurl binding place I should write “Kira.png” in the URL? That URL that Supabase bucket provides I can’t find. Where can it be located?

11

Capture d’écran 2024-05-14 à 18.39.52
Capture d’écran 2024-05-14 à 18.39.52781×919 209 KB

I think the path should be the name you used to upload the file

Here your item is inside avatars/Kira.jpg, but the action already target the bucket so Kira.jpg alone should be enough

If its for an user profile picture, you could name the img with the user id when you upload it, and so every time you need the public url you can use the user id for example, and it ensure one avatar will not erase another with the same name

12

Ok, in the second action I specify the path Kira.jpg

1099×559 66.2 KB

I thought that the action “Storage | Retrieve public URL” would return the public URL, but it doesn’t?
I need to concatenate the URL and the image name, right?
In the third action I did the concatenation, i.e. I got the url and I saved it in a variable.
After clicking Save I save the URL to Supabase in the Profiles table.
This works, but if I need to upload a new image it doesn’t work.

Using an id for a user’s image is a great idea, but I don’t have much experience. Can you tell me how to assign an id to an image?

13

Hello @icos ,

I’m a newbie on WeWeb / Supabase but here is what I’ve done to solve the same problem. Hope it helps you a bit.

I thought that the action “Storage | Retrieve public URL” would return the public URL, but it doesn’t?

Apparently it doesn’t so I gave up on that option.

I need to concatenate the URL and the image name, right?

That’s what I’ve done. In my case, I save the image name and its id in a table called “images”

Capture d’écran 2024-05-15 à 13.57.35

I use the following function for that. It’s triggered for every new upload in “images” bucket":

begin
  insert into public.images(path)
  values(new.name);

  return new;
  
end;

I will also add one function to delete the row when a file is deleted in the bucket.

In the third action I did the concatenation, i.e. I got the url and I saved it in a variable.

That’s also what I do. I combine it with a lookup formula in order to find the image name:

concatenate('https://qlkjdfhlkqdjfhlqkdsfhjk.supabase.co/storage/v1/object/public/Images/',lookup(globalContext.page?.['data']?.['image'],collections['5d2a923a-009d-43d4-91cf-9a61ea7af9e2']?.['data']).path)

14

When you uploaded the file you choose the path, instead of using the name of the img, you could use the id of the current user (go to the user tab in explorer, you will have the user variable containing the id)

Capture d’écran 2024-05-15 à 15.14.44
Capture d’écran 2024-05-15 à 15.14.441560×836 186 KB

If you allow more than only jpg you may need to extract the extension to concatenate it (<user-id>+"."+<file-extension>).

I’m not sure to understand what do you mean for the Retrieve public url, it should return you an url. What do you have in the result of the action when you use it ?

Some users reported a bug on the action where it return a wrong URL (a specific one that support transformation, like resize, but all supabase plan doesn’t provide this service so it’s not working for everyone) but it always return something, the fix is in review and should be released soon

15

After the “Storage | Retrieve public URL” action, I thought I could see and use it in Weweb. It appears in the logs, i.e. it is returned. I found the URL in the action results, but it was an error to use it (first message).

image
image1165×379 39.9 KB
It’s not found anywhere else, is it?
So I’m not using it.

16

@fabien Thanks for your help.
You upload an image and it goes into the bucket and into the table?

This is where I don’t get it:
“I use the following function for that. It’s triggered for every new upload in “images” bucket.”

begin
insert into public.images(path)
values(new.name);

return new;

end;”.
Where to apply this code?

17

Hello!
Actually, I think there is an easier way.

In your case you can link your “Profiles” table to the Supabase “object” table.

For each file uploaded in all your buckets, Supabase creates a record in a table called “objects”.

To see it, go to Table Editor → schema: storage → objects.

You’ll see all your files. For each one of them, their is a uuid (first column). I would use that ID in the “Profiles” table. For that, create a new columns in you “Profiles” table and bind it to the "object table with a foreign key.

Then you can use the same kind of concatenate + lookup formulas combination to display your avatar.

However, WeWeb doesn’t seem to allow us to lookup the storage schema.

So you may need to create a miror table like me.

In that case the function I gave you goes to Supabase → Database → Functions → Create a new function (type: trigger, security: definer). name it “handle_new_image”

then, go to SQL Editor → New query:

create trigger handle_new_image
after insert on storage.objects for each row
execute function handle_new_image ();

After that, you can create a collection in Weweb and look it up with a formula.

1 Like
18

@fabien Hi.
Thanks for the suggestions.
I had computer problems, so everything stopped.
I need to get everything back up and then I’ll continue.

19

Hi. I’ll tell you what happened with the mirror table variant for storage.objects.

  1. When loading, I get the error “INSERT has more expressions than target columns”, although the tables are identical.
  2. Triggers on storage.objects are NOT documented, may not work as planned and may change at any moment.

I will try to solve this issue with Supabase support, but I may have to give up this option.