Files uploaded through AWS file uploader not "rendering" to webpage

[yamirb]

The setup of AWS file uploaded was really easy. I uploaded an image file to my s3 bucket using the plug in. When I click “Object URL” of my uploaded image, in place of opening a new tab in web browser and displaying the image. I get a finder dialogue box to save the image on my hard drive. For images that I upload directly to my S3 bucket when I click “Object URL” the image is displayed on the new web browser tab.

Also how do I get the url from “Object URL” in S3 to a text field in my data base on bubble? In other words, how do I display images uploaded via AWS File uploader on my bubble website once they are saved in my s3 bucket?

[Ecaterina]

Hello, @yamirb
Thanks for reaching out.

I need to note that

@yamirb

When I click “Object URL” of my uploaded image, in place of opening a new tab in web browser and displaying the image. I get a finder dialogue box to save the image on my hard drive. For images that I upload directly to my S3 bucket when I click “Object URL” the image is displayed on the new web browser tab.

Indeed, there are 2 ways of uploading and opening the files, which were uploaded to the AWS bucket.
In case you are using File Uploader, you can press on the generated link and open the image in a new tab:

However, if you will use the NoGui element, you’ll need to download a file in order to see it:

My Page - 23 December 2022

This is the way how our plugin was created ( following the AWS official library).

@yamirb

Also, how do I get the url from “Object URL” in S3 to a text field in my database on the bubble? In other words, how do I display images uploaded via AWS File uploader on my bubble website once they are saved in my s3 bucket?

You can use a simple Image element, provided by Bubble. It can look this way:

Hope it would be helpful for you. If you have any other questions - don’t hesitate to ask them.
Best regards,

[yamirb]

In your example what is the difference between “Fileuploader A’s File URL” and “FileuploadNoGUI A’s”
I am getting “FileuploadNoGUI A’s url as and option” but not “Fileuploader A’s File URL”

This is how I have set up

The image on the top left is being pulled from my database

I have added “File upload No GUI” in the bottom

I have set bubble image element on top right

But I am not seeing any images come up on the top right.

[Ecaterina]

Hello, @yamirb

Please use "FileUploaderNoGui A’s URLs, instead of “FileUploaderNoGui A’s URL”.
Changing the dynamic image source, you will see the image on the top right:

Please try it and let me know about the result.
Best regards,

[yamirb]

Ecaterina,
Still no luck

[Ecaterina]

Hello, @yamirb
I’m sorry to hear that.

As I understand your issue correctly, the image is not displayed correctly in the image element after uploading it ( as was demonstrated in my example).

Due to the fact that we have some additional questions regarding your settings, can you please add our Support Team email to the list of collaborators to your application and provide me a link to your application? This will allow us to check your settings and run some tests to fix the mentioned problem.

To add our Support Team as a collaborator, you need to do the following steps in the Bubble Editor:

Settings > Collaboration > Add email support@zeroqode.com

Note: avoid the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.

Looking to hear you soon.
Regards,

[yamirb]

Ecaterina,
I send an invite to support@zeroqode.com. Thank you.

[Ecaterina]

Hello, @yamirb
Thanks for the provided access.

I’ve tested your app, created a test page, and checked the Development Console. I need to note that the root cause of the issue is in your AWS Bucket settings, more precisely in your ACL settings:

In order to resolve this issue, please follow the next steps:

1. 
2. Don’t toggle the “block” options
   
   
3. Find the ownership, then click edit.
   
   
4. Edit the object owner ship (ACLs enabled).
   
   
5. Now the edit button for ACL is clickable.
   
   
6. Toggle the permissions you want and save changes.
   
   

Please procession these steps and let me know about the result.
Best regards,

[yamirb]

Ecaterina, Thank you this worked perfectly. Thank you so much for helping me through this. Your support for this plug in fantastic. AWS File Uploader is far more valuable than $50 you guys are charging. Thank you

[Ecaterina]

Hello, @yamirb
I’m happy that it was helpful to you

If you like our plugin, could you please rate it by going to the Plugins tab in Bubble editor? You can find the plugin by name and give it as many stars as it deserves
I will be grateful to receive your feedback there.

Thank you and Happy Holidays

[yamirb]

Done!.

Happy Holidays

[yamirb]

Ecaterina,
Is it possible to customize image file names being uploaded to S3? The Plug in has “Folder name” field which I can insert dynamic data into but no such thing for file names.

I am trying to save food dish images inside the restaurant folders. I am able to dynamically create folder with the restaurant name in S3 using the “Folder name” field. I am using “Find and Replace” operation in this field to remove any special characters from restaurent’s folder name and replace it with hash “-”

This makes my folder name in S3 like this (which is perfect)

But the file that is uploaded inside this folder has no hash

I was hoping to have the file names with that have a separation of words with hash so google can index my files better.

Is it possible to have the naming of the folder and that of the file inside the folder have the same name structure(no special characters and “-” separating words)?

[Ecaterina]

Hello, @yamirb
Thanks for your question.

@yamirb

Is it possible to customize image file names being uploaded to S3? The Plug in has “Folder name” field which I can insert dynamic data into but no such thing for file names.

I’m afraid that it is not possible to dynamically change the title of the file during uploading.
If you create the folder yourself, and it can be done with the plugin, then the name of the file is already pre-created by each user or downloaded from a resource where each file has its own specific name.

All manipulations with the file titles could be done only manually on your end.

@yamirb

Is it possible to have the naming of the folder and that of the file inside the folder have the same name structure(no special characters and “-” separating words)?

Allow me to mention that all the special characters from the file titles could be removed or encoded in the AWS console since they are usually not allowed. However, using our plugin, you can use both the Original File Names or File names, changed by the plugin after removing special characters.

Unfortunately, there is no other way for changing the file name
Sorry for the inconvenience.

Best regards,