Accessing images from AWS S3 bucket

[thibaultknobloch]

Hello!

In my application, users upload pictures, which are stored in an AWS S3 bucket created automatically by bubble.

When downloading my database as a csv file, the images are in this format:
//s3.amazonaws.com/appforest_uf/f1618154240985x901501025616959700/IMG_#NUM.HEIC

I am now trying to access these images outside of bubble, but cannot access the S3 bucket without having the region name and the access key. Is there anywhere in my app where I can find this information or does bubble not allow users to access the automatically created AWS buckets outside of the bubble app?

Thank you for any help!

[lee1]

It’s probably the missing HTTPS:// that’s causing you the issue here.

You could create a new data field called s3 text and copy the url from the image and use a find and replace function to add the https:// back.

It’s a right pain when sending images out via the API as well.

[thibaultknobloch]

Hey @lee1 ! Thank you for a quick reply.
Adding the https:// does not seem to resolve the issue. I have tried clicking on the image link and the browser automatically adds the https.

The way I am trying to make this work:

This does not work, the link to the image does not seem to be retrieving the image with or without the https://.

[lee1]

Weird. Have you checked your privacy settings on the data type that holds the images?

[thibaultknobloch]

I am not sure how to check that setting for existing data types but I have never clicked the option to make anything private when creating all the data types so I assume bubble makes it public by default.

[lee1]

In the main bubble editor, go to data, and the select the data type and then in the top tab you’ll see privacy.

Best to check it first to discount it as an issue

[thibaultknobloch]

Hey thank you for the clarification! It says the data type is visible to everyone, so the issue has to be somewhere else.
Thank you for taking the time to help me!

[lee1]

Just for clarity, when you’re logged into your app, you can see the images the users have uploaded Ok I assume?

Are you on a free plan?

[thibaultknobloch]

I have upgraded this morning on a paid plan to be able to download the database as a csv file.

In the bubble app, everything works perfectly so its just accessing the images outside of the bubble app that is not working.

[lee1]

The URL doesn’t actually look right. It’s got a space after the heic 3 at the end

[thibaultknobloch]

Hey! I do not see where the space is. If you look in the screenshot above of the html I sent, the url inside the tag looks correct to me.
Let me know if I am overseeing something

[lee1]

Sorry ignore that then; I’m on my phone and copied your sample by mistake.

I think the best thing for you to do is to create a support ticket with bubble. It looks like something isn’t right

[rowntreerob]

outside the bubble app, if you issue a get on the URL , are you getting a 403 return code? wild guess, read the data api docs, open up access to data api, make a data call via the data api for the img , supplying in the headers the access token , get the blob and THEN supply the blob to your html.img.src tag/attr vallue

[thibaultknobloch]

Thank you for the suggestion!
I am indeed getting an error 403 when trying to access the URL

I will try to figure out how to do what you suggested and will post back here.

[thibaultknobloch]

@rowntreerob first of all thank you for this new way of solving the problem.

I can now access the data from just making calls to the api in my bubble app. My python script now gets the data needed, however the URL I receive for the images are still in the same format.

How do I receive a “blob” from the data call?
Should I just convert the url I receive to a blob?

[thibaultknobloch]

So it is working now. For anyone wondering, I changed nothing and it now displays the image, Im really not sure what changed.

The http:// with the url that bubble stores In the database in the attribute now works.

Thanks @lee1 and @rowntreerob for your support! You made me try different approaches and now it works.