Services Plugins FAQs

How to display s3 image files and file url "null_" prefix if you leave file prefix empty

Plugins
#1

HI

I am uploading image files to s3 using the AWS file uploader plugin. But I can not work out how to display the images uploaded form the urls saved in the database.

I have tried referencing using the image element and tried using the html element using an tag but still nothing.

Can you please provide some guidance on this. How do you display images form the s3 using the files locations saved?

Is it a permissions thing or do I need a particular way of displaying the images from s3?

What I need to do is display the images uploaded to the s3 bucket based on the url saved.

#2

I am also getting an extra characters added to the file name?

For example “null_testimage.jpg” but the s3 url is actually “testimage.jpg” this maybe why I can not get it to show?

Why is it adding “null_” the to file url saved in the database and ist is not the same as the s3 url?

Example when I pull the file url from the file uploader it is in this format:

/UUID/null_testimage.jpg

But the actual s3 location is:
/UUID/testimage.jpg

It adds the null if you leave the file prefix empty.

#3

Hello @SteveM, thank you for reaching out.

The images can be displayed using the image elements. It is only needed to use the URL to the file in the field Dynamic image.
image
There may be an issue with permissions, please make sure you have followed all steps and recommendations from plugin’ documentation. Maybe you blocked access and that is causing the issue.

Regarding the added “null_” text to the URL, please make sure you unchecked the box “Add prefix to filename” if you are not using a prefix. When the prefix field is empty this box always has to be unchecked.

image
image339×549 12.2 KB

Best Regards,
Alex

#4

It was an issue with the core policy and copied the image examples given.

For anyone who is looking to add as in the image example provided you can use the following.

Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "https://your-url.com*",
                        "https://app.yoururls.com/*"
                    ]
                }
            }
        }
    ]
}

CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://app.your-url.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
#5

HI @alex.grimacovschi

I have recreated the s3 bucket and permissions and can see the image when I refer to the uploads url, but when I simply use an image element and run a simple query to pull the s3 url I can show the url but I can not display the image.

I get a console error: “Failed to load resource: the server responded with a status of 404 (Not Found)”

It only seems the display the image if you refer to the url at the time the uploader is holding the file location. If you then refer directly to the stored url it does not display the image??

PS. I am an expert bubble user with more than 4 years experience, so feel free to speak to me on your level. Thanks

#6

So what I want to do is show the images stored in s3 not only while I am using the uploader.

#7

Ok this is insane
Now when I save a file I choose “uuid_filename” no prefix and it still adds a as if it is “uuid/filname”

Not only that, it is also adding a prefix on its own to be “was_au_” so a file which might be saved as “image.jpg” in bubble now in s3 it is now “was_au_image.jpg”

I have followed your example to the letter and I am familiar with aws and s3 and there appears to be an issue with this plugin.

Bubble database:

https://s3.ap-southeast-2.amazonaws.com/my-bucket/6175ccc5-b5a3-4f78-bf18-646f5dfab07c_imageFile.jpg

S3:

https://my-bucket.s3-ap-southeast-2.amazonaws.com/6175ccc5-b5a3-4f78-bf18-646f5dfab07c/was_au_imageFile.jpg

Is this because I added anew aws identity and bucket? Is this plugin caching settings data?

#8

This is really frustrating!

So the reason it can’t find the files I suspect because it keeps adding the random prefix “was_au” no idea where that is coming from!

Also it is always creating files even though i do not specify the file path to add the image in a file.

Even if you add a prefix and save it to s3 it drops the prefix on the file even though it is recorded correctly on the bubble database and add the “was_au_” instead.

I have not done anything other than follow the instructions as specified!

#9

HI @alex.grimacovschi after a long frustrating day I finally found two issues with the plugin.

Issue 1:

  1. I have two file uploads widgets inside a pop-up.
  2. Each has a different name.
  3. When I use one pop-up on the left of the other it is picking up the settings of the other and that is what I was seeing in AWS and why it was not making any sense!
  4. There is clearly a conflict with the two file uploads on the same pop-up.
  5. If you hide the other upload widget it works, but if visible on load there is a conflict.

Note: this is definitely caching settings data and you can’t use two in the same popup, can this be fixed?

Even if you add in the worklow to “reset fuleuploader” before you close the pop-up or adding this when you open the pop-up it visually clears the data but it is not clearing the settings of the previous used uploader.

Issue 2:

  1. Also after uploading I close the pop-up and in the work-flow I clear the pop-up of data and also specify to clear the uploads to make sure it is clear.
  2. When I open the pop up again the upload widget does not resize to the original size it appears to be the expanded size after the previous upload - see attached images. The UI is not resizing back to its original size after it has been cleared.

Size of the file upload ui before the upload of a file

before

After you upload the file and shows the preview or just shows the upload progress and complete, clear the upload of data and close the popup and clear the popup of data.

When you relaunch the pop-up it shows the resize from previous expended

after

#10

Hello @SteveM,

This issue may happen only because of the settings so please check once again if you set up all privacy rights accordingly.

I checked that with our devs and they confirmed that the plugin is not caching settings data.

Regarding the following requests our team will need time to investigate the issue:

I will keep you posted in this regard, checking the cause of that issue may take some time but our team will do its best to find a solution at the first opportunity.

Best Regards,
Alex

#11

Hi @alex.grimacovschi thanks for your response.

Yes the issue with not showing files was due to the conflict between the settings when having two upload widgets or more in the same pop-up - essentially it is saving the correct file url on s3, but on s3 itself it is saving the file based on the settings in one of the other file up-loaders on the same pop-up.

I have 3 of them in one popup one for a single image, one for text based and pdf documents and 1 for multiple image files.

So if you focus on issues 1 and 2.

Thanks

Steven

#12

hey @alex.grimacovschi any progress update on the two issues identified?

#13

Hello @SteveM,

Our team is still investigating the issue and search for solutions. Unfortunately, the issue is more complex than expected so finding a solution may take additional time. We are doing our best to deliver a solution at the first opportunity. Once we will have a fix I will let you know.

Best Regards,
Alex

#14

Hello @SteveM,

We pushed an update for the plugin that should address the issues you were facing. Please update the plugin and check if everything works fine on your side.

Best Regards,
Alex

#15

HI @alex.grimacovschi

I Updated this plugin, and it now does not show at all when looking at preview.

I removed it from the app and then put it back in and it still dose not show or work - nothing other than the container where it is supposed to be.

I reverted to version 1.40.0 and it uploads again. There is an issue with version 1.4.1.

I am using it in a popup. as stated above.

#16

Hello @SteveM, thank you for informing.

In this case, could you please add support@zeroqode.com as collaborators to your app? That will help to locate the issue and fix it ASAP. If it is possible to add us as collaborators please let us know the name of the app, page, and pop-ups where the plugin is used.

Best Regards,
Alex