Connect your Bubble app to external cloud storage like Amazon S3 for handling large files that exceed Bubble's built-in storage limits. This tutorial walks through configuring an S3 bucket, setting up file uploads from Bubble via a plugin, generating signed URLs for secure access, and displaying stored files in your app.
Overview: Adding Cloud Storage Integration to Bubble
Bubble's built-in file storage works for most apps, but if you need to store large video files, handle thousands of documents, or maintain data portability, connecting to Amazon S3 gives you more control and lower costs. This tutorial covers S3 setup, plugin configuration, and building upload and display workflows.
Prerequisites
- A Bubble app with the API Connector plugin installed
- An Amazon Web Services account with S3 access
- An S3 bucket created in your AWS console
- AWS Access Key ID and Secret Access Key with S3 permissions
Step-by-step guide
Create an S3 bucket and configure permissions
Create an S3 bucket and configure permissions
Log into the AWS Console and navigate to S3. Click Create bucket, name it (e.g., myapp-files) and select a region. Keep Block all public access enabled for security. Create an IAM user with programmatic access and attach the AmazonS3FullAccess policy. Note the Access Key ID and Secret Access Key for use in Bubble.
Pro tip: For production, create a custom IAM policy that only allows access to your specific bucket rather than using AmazonS3FullAccess.
Expected result: An S3 bucket ready to receive files and IAM credentials for API access.
Install and configure an S3 uploader plugin
Install and configure an S3 uploader plugin
In Bubble, go to the Plugins tab and search for an S3 file uploader plugin (such as AWS File Uploader or S3 Uploader). Install it and enter your AWS Access Key ID, Secret Access Key, bucket name, and region in the plugin settings. Mark the keys as Private so they are not exposed to the browser.
Expected result: The S3 uploader plugin is configured with your AWS credentials and ready to generate upload URLs.
Build the file upload workflow
Build the file upload workflow
On your upload page, add a File Uploader element or use the plugin's custom element. Add an Upload button. Create a workflow: When Button is clicked, use the plugin's Upload to S3 action with the file from the uploader element. After upload completes, save the returned S3 URL to your database by creating or updating a record with a file_url text field.
Expected result: Files selected by the user upload directly to S3 and the URL is saved in your database.
Generate signed URLs for secure file access
Generate signed URLs for secure file access
If your bucket blocks public access (recommended), use signed URLs so users can view or download files. Use the API Connector to call your backend or a plugin that generates pre-signed GET URLs. Signed URLs are temporary (typically 15-60 minutes) and grant read access to a specific file without exposing credentials.
Expected result: Users can view and download files through temporary signed URLs without the bucket being publicly accessible.
Display cloud-stored files in your app
Display cloud-stored files in your app
Add a Repeating Group with the Data Type containing file_url. In each cell, add an Image element for images with source set to the file URL, or a Link element for documents. For files requiring signed URLs, use a workflow to generate the URL when the cell loads and display it via a custom state.
Pro tip: For images, use a CDN like CloudFront in front of your S3 bucket for faster loading worldwide.
Expected result: Files stored in S3 display correctly in your Bubble app through Image elements or download links.
Complete working example
1{2 "api_name": "AWS S3 API",3 "authentication": "Private key in header",4 "calls": [5 {6 "name": "Generate Pre-signed URL",7 "use_as": "Action",8 "method": "POST",9 "url": "https://your-backend.com/api/generate-signed-url",10 "headers": {11 "Content-Type": "application/json",12 "Authorization": "Bearer [your_backend_api_key]"13 },14 "body": {15 "bucket": "myapp-files",16 "key": "<file_path>",17 "expires_in": 3600,18 "operation": "getObject"19 },20 "response_sample": {21 "signed_url": "https://myapp-files.s3.amazonaws.com/uploads/file.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&...",22 "expires_at": "2026-03-28T12:00:00Z"23 }24 },25 {26 "name": "List Bucket Files",27 "use_as": "Data",28 "method": "GET",29 "url": "https://your-backend.com/api/list-files",30 "headers": {31 "Authorization": "Bearer [your_backend_api_key]"32 },33 "parameters": {34 "prefix": "<folder_path>",35 "max_keys": 5036 },37 "response_sample": {38 "files": [39 {40 "key": "uploads/document.pdf",41 "size": 1024000,42 "last_modified": "2026-03-15T08:30:00Z"43 }44 ],45 "total": 146 }47 }48 ]49}Common mistakes when integrating cloud storage with Bubble
Why it's a problem: Making the S3 bucket publicly accessible
How to avoid: Keep Block all public access enabled and use pre-signed URLs for file access.
Why it's a problem: Storing AWS credentials in non-private fields
How to avoid: Always mark AWS Access Key and Secret Key fields as Private in the API Connector.
Why it's a problem: Not handling upload size limits
How to avoid: Add validation before upload that checks file size and shows an error if it exceeds your limit (e.g., 50MB).
Best practices
- Keep S3 bucket permissions private and use pre-signed URLs for all access
- Mark all AWS credentials as Private in plugin settings
- Set file size limits on uploads and validate before starting
- Organize files in folders by user ID or date
- Use CloudFront CDN in front of S3 for faster delivery
- Store the S3 file key alongside the full URL for flexibility
- Set signed URL expiration to the minimum necessary duration
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to integrate Amazon S3 cloud storage with my Bubble.io app. How do I set up the bucket, configure the plugin, upload files from Bubble to S3, and display them securely using pre-signed URLs?
Add an S3 file upload feature to my app. Install an S3 uploader plugin, configure it with AWS credentials, create an upload page with a file uploader and submit button, and save the returned S3 URL to the database.
Frequently asked questions
Why use S3 instead of Bubble's built-in storage?
S3 offers more capacity, lower costs for large files, CDN integration, fine-grained access control, and data portability if you ever leave Bubble.
Can I use Google Cloud Storage instead?
Yes. GCS has a similar API structure. The setup is nearly identical — create a bucket, configure credentials, and use the API Connector.
How much does S3 storage cost?
S3 Standard costs approximately $0.023 per GB per month. 100GB of files costs about $2.30 per month.
Can users upload directly to S3 from the browser?
Yes, using pre-signed upload URLs. The plugin generates a temporary URL allowing direct browser-to-S3 uploads without routing through Bubble's server.
How do I delete files from S3 through Bubble?
Create a Delete File API call in the API Connector that sends a DELETE request to S3 for the specific file key. Trigger it from a workflow when the user deletes a record.
Can RapidDev help set up cloud storage for my Bubble app?
Yes. RapidDev can configure S3 or Google Cloud Storage, set up CDN delivery, implement signed URL security, and build file management interfaces.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation