AWS File Uploader Native Mobile

• In the AWS services search bar at the top, type "S3" and click on "S3" in the dropdown to navigate to the S3 Dashboard or open this link

• Choose to Create bucket. The Create bucket page opens:

• The name should be between 3 and 63 characters long.

• Consist only of lowercase letters, numbers, dots (.), and hyphens (-). For best compatibility, we recommend that you avoid using dots (.) in bucket names, except for buckets that are used only for static website hosting.

• The name should begin and end with a letter or number.

• For Region, choose the AWS Region where you want the bucket to reside. To minimize latency and costs and address regulatory requirements, choose a Region close to you. Objects stored in a Region never leave that Region unless you explicitly transfer them to another Region.

• For a list of Amazon S3 AWS Regions, see AWS service endpoints in the Amazon Web Services General Reference.

• Under Object Ownership, to disable or enable ACLs and control ownership of objects uploaded in your bucket, choose one of the following settings:

• Bucket owner enforced – ACLs are disabled, and the bucket owner automatically owns and has full control over every object in the bucket. ACLs no longer affect access permissions to data in the S3 bucket. The bucket uses policies to define access control.
To require that all new buckets are created with ACLs disabled by using AWS Identity and Access Management (IAM) or AWS Organizations policies, see Disabling ACLs for all new buckets (bucket owner enforced).

• Bucket owner preferred – The bucket owner owns and has full control over new objects that other accounts write to the bucket with the bucket-owner-full-control canned ACL.
If you apply the bucket owner preferred setting, to require all Amazon S3 uploads to include the bucket-owner-full-control canned ACL, you can add a bucket policy that allows only object uploads that use this ACL.

• Object writer – The AWS account that uploads an object owns the object, has full control over it and can grant other users access to it through ACLs.

• Under Block Public Access settings for this bucket, choose the Block Public Access settings that you want to apply to the bucket. We recommend that you keep all settings enabled unless you know that you need to turn off one or more of them for your use case, such as to host a public website. The Block Public Access settings that you enable for the bucket are also enabled for all access points that you create on the bucket. For more information about blocking public access, see Blocking public access to your Amazon S3 storage.

• (Optional) Under Bucket Versioning, you can choose if you wish to keep variants of objects in your bucket. For more information about versioning, see Using Versioning in S3 buckets. To disable or enable versioning on your bucket, choose either Disable or Enable.

• (Optional) Under Tags, you can choose to add tags to your bucket. Tags are key-value pairs used to categorize storage. To add a bucket tag, enter a Key and optionally a Value and choose to Add Tag.

• Under Default encryption, choose Edit.

• To configure default encryption, under the Encryption key type, choose one of the following

• Navigate to Your Account: At the top-right corner of the AWS Management Console, you'll see your account name or number. Click on it to open the dropdown menu.

• From the dropdown, select the "Security Credentials" option.

• Access Keys Section: Once on the Security Credentials page, expand the "Access keys (access key ID and secret access key)" section.

• Create New Access Key:
-If you already have existing access keys, you'll see them listed here.
-To create a new access key, click the "Create New Access Key" button.

• Download Credentials: After creating a new access key, you'll have the option to download it as a .csv file. Save this file securely, as AWS will not show these credentials again for security reasons.

javascript
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",            
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "https://zeroqode-demo-02.bubbleapps.io/*"
                }
            }
        },
        {
            "Sid": "AddPerm2",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "*",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

1. In the Permissions section, open CORS configuration.

2. Add the following CORS configuration

javascript
[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "PUT"],
        "AllowedOrigins": ["https://your-website.com"],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

• Navigate to the Plugins tab in your Bubble Editor.

• Add Plugins
• Once in the Plugins tab, click the Add Plugins button.

• Search for the Plugin
• Use the search bar to type AWS S3 File & Image Uploader.
• Locate the plugin in the search results.

• Install/Buy
• If the plugin is free, click Install to add it to your application.
• For a paid plugin, click Buy and follow the purchase instructions.

• Payment Information (For Paid Plugins)
• If the plugin is a paid one, fill in your payment details and make payment.

• Charges will be added to your Bubble billing account.

• Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.

• Plugin Installed
• Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.

• Open the Design tab in your Bubble editor.
• Search for the AWS S3 File & Image Uploader element in the Elements panel.

• Drag and drop the element onto your page.

Step 1 – Generate and Save the Token

Event:When Page is Loaded

Actions:

1. AWS (testing) – Get Token
• Provide the required keys (Access Key, Secret Key)

2. Set state of an element
• Element: AWS Upload
• Custom state: token
• Value: AWS (testing) – Get Token's token

✅ Result:

The token is generated and stored in the uploader element.

Step 2 – Configure the Uploader Element (Appearance Tab)

In the AWS S3 Native File Uploader element, set:

• Token: AWS Upload's token (dynamic)

• Region: your S3 bucket region (e.g. us-east-1)

• Bucket Name: your S3 bucket name

⚠️ These three fields are mandatory.

• Token is generated once

• Element is correctly configured

• Files are uploaded securely to AWS S3

• No AWS credentials are exposed to the client

• Bubble Plugin Page Update (Forum).

• Bubble Plugin Page Update (Description).

• Initial Plugin Release.