This plugin provides a robust solution for uploading images and files directly to an AWS S3 bucket from a Bubble.io application. It features a modern, mobile-optimized "Dropzone" style interface with horizontal scrolling and real-time progress tracking for each file.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/kW1puGu7
⚠️
Please note that the testing app is currently available for iOS only.
How to setup
To run this plugin you need the following to set it up on the AWS side:
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 bucket name must be created with the next conditions:
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.
After you create the bucket, you cannot change its name. For more information about naming buckets, see Bucket naming rules.
❗
IMPORTANT! Avoid including sensitive information, such as account numbers, in the bucket name. The bucket name is visible in the URLs that point to the objects in the bucket.
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:
ACLs disabled
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.
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
Step 2 – Get credentials
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.
☝
The policy we present in the documentation is just a template. Each client can set their own rules. The plugin works with pre-signed URLs and can operate with any policy.
Step 3 – Setting Cross-origin and Politics.
CROSS Configuration is required for the case when your resources should not to be accessed by external resources.
For example, you set domain "https://your-domain/" in cross, this means that only apps with the domain "https://your-domain/" will be able to access AWS Bucket.
Add security to your AWS bucket by configuring policies on the 'Permissions' tab:
In the next steps, we'll show you how to set Access Control, Bucket Policy, and CORS policy to get started with basic security restrictions.
1. In the 'Block public access' area unlock public access to all for time being.
2. In the 'Bucket Policy' area you can configure the rules for security and privacy via Bucket Policy. Take a look at the "Action", "Resource" and "Condition" fields where we grant access to reading the objects from our bucket.
In this case, we are granting read file access only to users from our application domain, so if a user gets an image URL and tries to open it in a new tab or a new window, the bucket policy will block this request because we stated in the privacy rules that the link can be opened only from our domain:
YOUR-BUCKET-NAME - should be your S3 bucket name (ex: zeroqodedemo02).
You can find more Bucket Policy examples here. Feel free to try out other rules in order to improve your bucket security, since this documentation presents only our example of the settings.
3. In the Access control list (ACL) area make sure that all the options look like the image below to match our configuration:
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 more securely.
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://)
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.
Step 5 – Configure AWS Settings
Open the Design tab in your Bubble editor.
Search for the Phone Number Input element in the Elements panel.
Drag and drop the element onto your page.
Step 6 – Configure Properties
Setting Default ISO country code
This field allows you to set the initial country that the phone input should load when the page renders.
You can enter any ISO country code (e.g. AD, AF, AE, AL, US, CA).
When provided, the element will automatically:
select the matching country
display the correct flag
show the correct international dial code
apply the country’s phone number pattern
Example:
If you enter AD → the element loads Andorra (+376) as the default country.
Note: This must be the ISO Alpha-2 code, not the dial number.
Setting Default Value
This field allows you to preload a phone number inside the input when the element initializes.
You can enter either:
a raw number (digits only), or
a partially formatted number
The plugin will automatically:
strip non-digits
remove any prefix (if present)
format the number based on the selected country’s pattern
validate it instantly
Example:
If the default country is AD and the Default Value is:
12 3456 → The plugin formats it as:
12 3456
and outputs the full number:
+376 12 3456
☝
Combined Behavior (Important)
If both fields are provided, the plugin applies this logic:
ISO country Code → sets the initial country
Default Value → formats the number according to the country selected above
This ensures correct formatting and validation from the start.
Plugin Element - Phone Number Input Free
The AWS S3 Native File Uploader is a Bubble Native (React Native) plugin element that allows users to upload files directly from mobile apps (iOS & Android) to an AWS S3 bucket using pre‑signed URLs.
The element includes a modern, customizable UI, supports multiple file uploads, gallery & file manager selection, progress tracking, file deletion, and exposes rich Bubble states & events for full workflow control.
Uploads are performed securely, without exposing AWS credentials on the client.
Fields
Field Name
Description
Type
Token
Security token sent to backend
Text
Region
AWS region (ex: us-east-1)
Text
Bucket Name
Target S3 bucket name
Text
Expires In
Pre-signed URL expiration (seconds)
Number
Allow Multiple Files
Allow selecting multiple files
Yes / No
Max File Count
Maximum number of files allowed
Number
Max Total Upload Size (MB)
Maximum total upload size
Number
Default Picker Source
Default source (Gallery / File Manager)
Dropdown
Button Text
Main upload button label
Text
Success Message
Message displayed on successful upload
Text
Error Message
Generic error message
Text
Uploading Message
Displayed while uploading
Text
Deleting Message
Displayed while deleting a file
Text
No Files Selected Message
Shown when no valid files are selected
Text
File Limit Exceeded Message
Shown when max file count is exceeded
Text
Size Limit Exceeded Message
Shown when total size limit is exceeded
Text
Permission Denied Message
Shown when media permission is denied
Text
Selection Canceled Message
Shown when picker is canceled
Text
Picker Modal Title
Picker modal title text
Text
Gallery Label
Label for gallery option
Text
File Manager Label
Label for file manager option
Text
Cancel Button Text
Cancel button label
Text
Border Color
Upload container border color
Color
Border Radius
Upload container corner radius
Number
Background Color
Upload area background color
Color
Font Color
Main text color
Color
Font Size
Main text size
Number
Button Background Color
Icon button background color
Color
Icon Color
Upload icon color
Color
Exposed states
Event Name
Triggered When
Upload Finished
All files are uploaded successfully
Upload Failed
Upload process fails
Image Removed
A file is removed by the user
Element Events
Field Name
Description
Type
Border Color
Upload container border color
Color
Border Radius
Upload container corner radius
Number
Background Color
Upload area background color
Color
Font Color
Main text color
Color
Font Size
Main text size
Number
Button Background Color
Icon button background color
Color
Icon Color
Upload icon color
Color
Workflow example
Here are some basic workflow examples to get you started with the Phone Number Input Free For Bubble Mobile plugin: