Bubble.io and Amazon S3 integration: Step-by-Step Guide 2024

Step 1: Setting up Amazon S3

Before you start integrating Bubble.io with Amazon S3, make sure you have an AWS(S3) account. Sign up and navigate to the S3 service.

• Click on the Create Bucket button.
• Provide a unique name for your bucket and select a region.
• In the bucket Properties settings, you should enable Cross-origin resource sharing (CORS).
• In the CORS box, please enter the following configuration:

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

• Click Save.
• Go to the Permissions tab and in the Bucket Policy section paste this policy:

  {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::[bucket-name]/*",
                "arn:aws:s3:::[bucket-name]"
            ]
         }
     ]
  }
  

• Replace [bucket-name] with your bucket's name. Click Save.

Step 2: Create an IAM User

• Navigate to the IAM Dashboard.
• Click on Users, and then Add user.
• Provide a name for your user and select Programmatic access.
• In the Set Permissions screen, choose Attach existing policies directly.
• Search for AmazonS3FullAccess and select it. Click Next.
• Review your settings and click Create User.
• You will see a Success screen. Record the Access Key ID and Secret access key. You will need these for Bubble.io.

Step 3: Integrate with Bubble.io

• Log in to your Bubble.io dashboard.
• Choose your application and navigate to the Plugins tab and click on Add plugins.
• Search for Amazon S3 Uploader and install it.
• After successful installation, navigate back to your application and go to the Plugins tab. You will see the S3 Uploader listed.
• Enter your Access Key ID, Secret Access Key, and Bucket Name that you obtained from AWS.
• Save the settings. Your integration is now complete.

Step 4: Use File Uploader

To test if your integration is successful, use a File Uploader element in Bubble.

• Drag a File Uploader element to your page from the Design tab.
• Click on the element, and in the Inspector, you'll see S3 Uploader as a type choice.
• Select it and preview your application. You can now test uploading a file to your S3 bucket.

Now, Amazon S3 is successfully integrated with your Bubble.io application, and you should be able to upload and store files in the S3 bucket directly from your Bubble.io application.