Services Plugins FAQs

AWS plugin - Invalid JSON (Bucket policy)

Hi Team. I have been struggling to get the AWS file uploader plugin working correctly. I am facing difficulty in setting the bucket policy as described in the plugin documentation.

As you can see, my setting match with the one shown in the documentation.

Can you please let me know where I am going wrong?

Hi @sharma.himanshu0608,

Thanks for reaching out. Everything seems to be correct on your side. It is just missing a comma after the Resource value:

Hope it helps.

Best,
Alex

Thanks for the tip @alexandru. It’s not solved. However, I am now stuck in the CORS section. Do we need to pass XML only in CORS?

This is what I am entering.

Hi @sharma.himanshu0608,

Thanks for feedback. Sorry about confusing, we are in the process of updating our docs because AWS doesn’t use the XML configurations anymore. Instead, it is using the JSON format.

Please use the following code for CORS:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "https://YOUR-OWN-DOMAIN-HERE.com"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
] 

Let me know how it goes. :pray:

Hi, I have the same problem in bucket policies, apparently the code is in json format, I use the same code that was provided, already corrected

Updating my answer, I already configured everything correctly, but the files do not load, it shows me a message in red in the fileuploader “Server responded whit 0 code”, I leave the images of my configurations

Hi @nowxoel,

Thanks for screenshots! Please let us check on our plugin among with developers, because this might be an issue on our side, unfortunately. Are you using the latest version of the plugin?

I’ll get back to you asap!

Best,
Alex

Hi, yes, I have the latest version, although I did tests with zeroqodedemo02 credentials to verify it and everything worked correctly, but not with my credentials, although it is strange, now it no longer works with any credentials (mine and zeroqodedemo02), yesterday for the night worked with the one by zeroqodedemo2

image

Hi @nowxoel,

Thanks for details. We actually managed to fix this error on our side and launch an update. Please make sure you upgrade to the latest version - first, then please set the following setups on your AWS account:

IAM Security Roles

{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Effect": "Allow",
           "Action": [
               "cognito-sync:*",
               "cognito-identity:*",
               "S3:*"
           ],
           "Resource": [
               "*"
           ]
       }
   ]
}

Permissions tab

Bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",            
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "YOUR-DOMAIN/*"
                }
            }
        },
        {
            "Sid": "AddPerm2",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "*",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

ACL settings

CORS settings

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
]

Please note: Setting the CORS policy like this will allow everyone to change anything in your bucket, but you can definitely go deeper and set it up a more secure way. For example, you can use the following JSON for CORS policy to allow access from your domain only ( change the allowed origin to the URL of your app starting with https ):

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "https://yourdomain.com",
            "https://yourdomain.bubbleapps.io"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
]

So just copy and paste the JSON setups above and change with your own domains and bucket names, then give it a try again. You can check on our updated docs for more information if you will.

Hope it helps!

Hi, it didn’t work, I changed all the settings according to the prompts, but it shows the same error message and doesn’t upload the file

Hi @nowxoel,

Thanks for confirming. In this case, could you please add our support@zeroqode.com account to your Settings/Collaboration tab within your editor.

Tell us your app name and page name where this problem occurs on test. Also, please describe the steps we need to follow in your app in order to reproduce the error.

If you don’t mind, it would be best to create a test page so we can tweak it for debugging purposes.

We’ll get back to you asap!

Hi, I currently have the personal plan, but I have configured it to be accessible for the moment, I have created the test page is this https://bubble.io/page?type=page&name=test_file&id=colclic&tab=tabs-1 It is simply to upload the file and press the save button to save, by the way, the thumbnail is also cut

Hi @nowxoel,

Thanks for sharing your app. It is really weird because we even changed to our bucket just for testing purposes, and it still throws this error on preview. So the problem is certainly not in your bucket configurations at this point.

However, when we just opened your editor, Bubble said there are some troubles with your domain, which may be the reason of this issue on your side. Could you please do the following things:

  • check on your domain just to be sure it is pointing to Bubble servers properly and there are no roadblocks on this matter
  • uninstall and install the plugin again, set the bucket and give it a try (it helps in most cases)

Let me know how it goes!

Hi, I have made all the configurations, on the domain it is because I have cloudfire configured in proxi redirection to increase the speed, but I already disabled it and there is no problem, my bucket has no restrictions and I already uninstalled and reinstalled the plugin, but the problem keep going

Hi, any news? By the way, I was doing tests with the NO GUI element and it works, I leave a capture, although it fails when they just load the file and upload it, you have to press a second time to upload the file, regarding the GUI element I still have the same problem

Updating my answer, I have found the solution, although it is strange, because the problem was in aws, apparently the bucket region must match the IAM security roles, I configured this since my bucket was us-west-2 region and my IAM security roles were us-east-2 so no problem anymore

1 Like

Thanks @nowxoel a lot for confirming!

I’m glad you managed to figure it out on your own. :pray: Hope now you can proceed with your app development easily. Let me know if you have any other issues.

If you do like our plugin so far, could you please rate it by going to Plugins tab in Bubble editor? You can find the plugin by name and give it as many stars as it deserves. The more feedback we get, the more motivated we are to build great plugins!

Alex

1 Like