Error getting Public Url from Supabase bucket

Hi !

I’m creating a user profile, I want my user to be able to upload a logo.
I’m using a supabase bucket to store the image. So far, uploading the image works fine.

Trying to get the public url back is not working.

Basically, if I get the public url from directly from supabase dashboard, I get this and it works fine :
https://woturpbyqhwegbzwrjra.supabase.co/storage/v1/object/public/logo-bucket/logo_932c9551-c52a-424f-986c-e4b52900e0cb_10186540_quality_badge_ribbon_award_best_icon.png

If I use the GetPublicUrl method in weweb, I get this and it doesn’t work :
https://woturpbyqhwegbzwrjra.supabase.co/storage/v1/render/image/public/logo-bucket/logo_932c9551-c52a-424f-986c-e4b52900e0cb_10186540_quality_badge_ribbon_award_best_icon.png

The difference is that the weweb method returns from the “render/image” directory instead of the object/public directory.

Why is that ? Am I missing something ?
Thanks :slight_smile:

1 Like

Another great question! :smiley: Let me ask the team and get back to you asap.

I’ll second this. I am also getting the render/image directory when trying to fetch publicURL.
I could do a workaround, but if this is a bug or there’s another way, I’d prefer that.

I definitely believe it is a bug that I’ve been dealing with for months since it won’t allow you to view pdfs in the browser. The workaround that I’ve been using has been to use custom JavaScript to call the supabase plugin to get the correct public URL (Displaying an image from Supabase - #12 by Broberto).

const { data } = await wwLib.wwPlugins.supabase.instance
  .storage
  .from('<bucket-name>')
  .getPublicUrl('folder/avatar1.png')

return data

The URL return from this matches what you see if you manually get it inside supabase.

image

I honestly might just continue doing this as so far is covers all files types (and I don’t use the transform or download link that often anyways), but it would be nice for them to fix this issue with the plugin.

3 Likes

This is a great workaround !

So far, I’ve been using the GetSignedURL method instead. It’s not ideal and you need to either cache images or call the DB often to retrieve them. Since my app is not image intensive it’s been ok. But, your workaround seems like the better solution. I will test it. Thank you

UPDATE : It works great !

I created a global workflow in weweb to house the custom code proposed by @avery. Sending the filepath in parameter and it works pretty much like the API would.

:ok_hand: :+1:

1 Like

Ok that’s interesting, it seems like when using transform: false in the sdk action as parameter it still build a specific url related to a transform API, even if there is no parameters provided to ask for a transformation.

We will test to remove the transform property itself from the sdk call when every option are disabled and see if it solve the issue.

Thanks for sharing your findings there, it helped a lot :+1:

1 Like

For public images:
In the response, or wherever you use the file url I added this at the end:

replace("render/image","object")

It basically just replaces the text to make the url work.

Didn’t think of this. I guess it’s a good method for a temporary workaround, but the problem with this is maintenance down the road. If at some point the API changes and/or start using another pathname (which happens all the time), all your links will stop working and you’ll have bugs to fix across your code. I would rather avoid maintenance and potential bugs while my app is improving and scaling up.

Luckily, it’s a find and replace; so if the API returns correctly, I don’t think it’ll replace anything at all - so it will still work.

An issue would be if the render/image path suddenly becomes correct.

A fix has been released two or three weeks ago, do you still have the issue ? @Kawwl @oblic @avery

Good catch ! Seems to be working fine now.
I tried the “Storage | Retrieve public URL” function and got this :
publicUrl: “https://woturpbyqhwegbzwrjra.supabase.co/storage/v1/object/public/logo-bucket/logo.png

1 Like