Get URL from image in bucket and paste it in a table
Hi, I have a bucket where I am uploading images, I have a table as well. The images name is the same as in the table, the only difference is the .png that it automacally gets from the format on the bucket.
What do I need? I need to run something that generates the URL from the bucket and fills out the cell in the table that corresponds to image_url, it obviously has to match the name of the image with the name on the table.
the bucket where i need to get the url from is called 'catching' and the table where the url needs to go is 'catching_chart_images' column 'image_url'
15 Replies
Normally you should store the path name if the bucket is fixed (not the URL). If the bucket can vary then you need to store that also or store the bucket/path string.
Then you use getPublicURL (just a string concatenation function) if a public bucket or createSignedUrl() for private. You have to provide the bucket name and the pathname separately for those calls.
For a private bucket saving the URL does no good. For a public one you could do that, but if your URL to your app/instance ever changes then you have to edit the entire db to change your URLs. Because getPublicUrl does not go to the server it is very fast.
For a private bucket saving the URL does no good. For a public one you could do that, but if your URL to your app/instance ever changes then you have to edit the entire db to change your URLs. Because getPublicUrl does not go to the server it is very fast.
I am not a dev and totally new to Supabase, so please excuse me if i ask dumb questions that you already answered.
@garyaustin the reason I am doing this is because I need the image to display in my Bolt website.
What I understand from what you are saying is that the bucket should be public and not private in order to be displayed.
and after i set it up to public, I can call a function that just gets the public URL?
You can do either public or private that depends on who you want to be able to access the files.
If the images are public then you would do a select on your table and call getPublicUrl https://supabase.com/docs/reference/javascript/storage-from-getpublicurl Bold should know how to do this.
JavaScript: Retrieve public URL | Supabase Docs
Supabase API reference for JavaScript: Retrieve public URL
@garyaustin there are 1008 images, and each image corresponds to a different variable, that's why I want the url of the image to be in the table where the variables are
Yes.
You store the path not the URL. If the bucket is the same for all then when you get the path, you just use the known bucket name for the call to getPublicUrl.
You can certainly store the full URL ahead of time but you would still need to build it with getPublicUrl or string concatenation and then add it to the table.
Okay, I might have understood half of what you said. my question is how do I get the path? and there should be a column for that path in my table?
Thank you for your patience @garyaustin
When you uploaded the file the you provided the pathname.
So you would insert/update this table after you upload the file.
Upload also returns the path.
this is the first image I uploaded
And you stored the filename, which also might be the pathname if you don't have folders.
If you run getPublicUrl with the string from the Name column it would probably work unless you added more to the pathname when you uploaded.
i am sorry, how do I know what exactly should i run? and when you say run you mean in the SQL editor?
bucket: catching
path: name
Table where i want the url to be added: bucket_images
column where I want the url to be added: url
I would not add the url at all to the database.
I would use getPublicUrl when you get the filename/pathname in your client.
If you want to store the full URL then when you upload the file you will need get the full URL in your client code that uploaded the file and insert/update the table you are showing with a URL column.
Either way you have to generate the full URL with string concatenation or getPublicUrl. Normally on the client.
Is all this info already uploaded or are you looking for a process to handle this when you upload the images and that table data?
so this is where the image is supposed to be displayed, that is connected to the variables from the buttons. I added the path manually to the table connected to the interface because basically the path is the name of the image plus .png
I've uploaded one image to try to connect it, before i upload the rest
IF you are not using folders for the filename then in your code where you need the image...
Select Name from your table.
Then call:
The public URL can then be used in an img tag.
If you really want to store the full URL then in code that is inserting to catching_chart_images, call getPublicUrl with the filename with extension. It will return a full URL, then you can insert that with your other catching_chart_images data.