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

Integrating Bubble.io with AWS S3 requires setting up a Bubble app and setting up S3 for file upload which includes creating a bucket, obtaining an access and secret key and setting the CORS configuration.

Step 1: Configure S3 Bucket on AWS

The first step is to setup a new S3 Bucket on AWS.

• Sign in to your AWS Management Console.
• Navigate to the S3 service.
• Create a new bucket by clicking on the 'Create Bucket' button.
• Enter a unique Bucket Name and select a Region.
• Click 'Create' to set up your bucket.

Step 2: Obtain your AWS Access Key

Next, you need to obtain your AWS 'Access Key' and 'Secret Access Key'

• Navigate to your AWS Account.
• Click on ‘My Security Credentials’ under your account name drop-down.
• Click on 'Access keys (access key ID and secret access key)'
• Click on 'Create New Access Key' to generate an access key and a secret access key.
• Download these as you will not be shown the secret access key again.

Step 3: Setting the CORS Configuration

• After setting up the bucket, you need to configure the CORS settings of the S3 bucket.
• Navigate to your S3 bucket, click on the 'Permissions' tab.
• Navigate to the 'CORS configuration' editor.
• Insert the following into the editor:

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

• Finally, save your changes.

Step 4: Setting Up Bubble

Setting up Bubble involves setting up the API connector plugin and configuring the API calls.

Configuring the Plugin

• Go to your Bubble Dashboard and open your app.
• Navigate to Plugins and search for the 'API Connector' Plugin developed by Bubble and install it.

Configure a POST API Call to AWS

• To setup a POST API call, navigate to the installed plugin 'API Connector'.

• Click on 'Add another API' and fill in the following details:

• API Name : Give an appropriate name that matches the purpose of the call.

• Add a POST Call and name it "Upload File".

• The 'Endpoint URL' will be a combination of your new bucket’s URL and dynamic data. It can be in the format https://your-bucket-name.s3.amazonaws.com, replace "your-bucket-name" with your actual S3 bucket name.

• You will also need to fill out the fields in the 'Add parameters to the URL or the header' section and they will include 'Content-Type', 'acl', 'AWSAccessKeyId', 'policy', 'signature'.
• In the Headers section 'Key' field set as 'Content-Type' and 'Value' will be set to a dynamic data which will be equal to the file’s MIME type.

Adding Functionality to Upload a File

• Create a workflow for when a button is clicked to upload a file and in 'File uploader' element settings ensure that the 'This file uploader can save multiple files' is unchecked.

• Add a new step to make a POST 'api_name' Upload_file (replace api_name with what you named your API).

• There will be multiple fields to fill here:

Calls: Upload File
Body Type: File
File: File Uploader's value

Step 5: Adding Functionality to Display a File

• If you want to also display files, create a new state on a text box to save the file's URL.
• You can simply set the source of an image or document viewer to this state. This way the user can have a visual confirmation of a successful file upload.

By following these steps, you'll now be able to integrate Bubble.io with AWS S3 for file uploads.