AWS S3

In the AWS Console, go to IAM → Users → Create user. Give it a name like `bubble-s3-uploader`. On the permissions step, choose 'Attach policies directly' → Create policy (JSON tab). Paste a policy that grants only `s3:PutObject` and `s3:GetObject` on your specific bucket ARN: ```json { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": ["s3:PutObject", "s3:GetObject"], "Resource": "arn:aws:s3:::your-bucket-name/*" } ] } ``` Name the policy `BubbleS3UploadPolicy` and create it. Attach it to the new IAM user. After creating the user, go to the user detail page → Security credentials tab → Create access key. Choose 'Application running outside AWS' and click Create. Download the credentials CSV — you will not be able to see the Secret Access Key again after closing this dialog. This user has the minimum possible permissions: it can only put and get objects in your specific bucket. It cannot list bucket contents, delete files, or access any other AWS service. This principle of least privilege limits the blast radius if the key were ever exposed.

1{
2  "Version": "2012-10-17",
3  "Statement": [
4    {
5      "Effect": "Allow",
6      "Action": ["s3:PutObject", "s3:GetObject"],
7      "Resource": "arn:aws:s3:::your-bucket-name/*"
8    }
9  ]
10}

In the AWS Console, open your S3 bucket → Permissions tab → CORS configuration. Click Edit and paste the following CORS rule, replacing the AllowedOrigins value with your actual Bubble app domain: ```json [ { "AllowedHeaders": ["*"], "AllowedMethods": ["PUT", "GET"], "AllowedOrigins": [ "https://yourapp.bubbleapps.io", "https://www.yourdomain.com" ], "ExposeHeaders": ["ETag"], "MaxAgeSeconds": 3000 } ] ``` This CORS configuration is critical. Without it, the browser's Same-Origin Policy will block the direct PUT from your Bubble app to S3 — even though the presigned URL is technically valid. The browser sends a preflight OPTIONS request to S3 before the actual PUT; S3 uses this CORS rule to decide whether to allow the cross-origin request. Include your full Bubble domain (e.g. `yourapp.bubbleapps.io`) and any custom domain you've connected. Save the CORS configuration. The change takes effect immediately — you do not need to redeploy or restart anything in AWS.

1[
2  {
3    "AllowedHeaders": ["*"],
4    "AllowedMethods": ["PUT", "GET"],
5    "AllowedOrigins": [
6      "https://yourapp.bubbleapps.io",
7      "https://www.yourdomain.com"
8    ],
9    "ExposeHeaders": ["ETag"],
10    "MaxAgeSeconds": 3000
11  }
12]

In the AWS Console, go to Lambda → Create function → Author from scratch. Name it `generate-s3-presigned-url`, runtime Node.js 20.x. Under Configuration → Environment variables, add: `AWS_S3_BUCKET` = `your-bucket-name`, `AWS_S3_REGION` = `us-east-1` (your bucket's region). For Lambda's execution role, attach the same `BubbleS3UploadPolicy` you created in Step 1 (Lambda will use its own role credentials, not the IAM user's keys — which is even better security practice). In the Lambda code editor, paste the following function: ```javascript import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'; import { getSignedUrl } from '@aws-sdk/s3-request-presigner'; import { randomUUID } from 'crypto'; const s3 = new S3Client({ region: process.env.AWS_S3_REGION }); export const handler = async (event) => { const body = JSON.parse(event.body || '{}'); const { fileName, contentType, folder = 'uploads' } = body; if (!fileName || !contentType) { return { statusCode: 400, body: JSON.stringify({ error: 'fileName and contentType required' }) }; } const key = `${folder}/${randomUUID()}/${fileName}`; const putCommand = new PutObjectCommand({ Bucket: process.env.AWS_S3_BUCKET, Key: key, ContentType: contentType }); const getCommand = new GetObjectCommand({ Bucket: process.env.AWS_S3_BUCKET, Key: key }); const putUrl = await getSignedUrl(s3, putCommand, { expiresIn: 900 }); const getUrl = await getSignedUrl(s3, getCommand, { expiresIn: 86400 }); return { statusCode: 200, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ putUrl, getUrl, key }) }; }; ``` Deploy the function. Then add an API Gateway trigger: under Function overview → Add trigger → API Gateway → Create a new REST API → Open (for now, you'll add an API key later). After saving, note the API endpoint URL — this is what Bubble will call. If you want auth on the API Gateway endpoint, add an API key or use IAM authorization — this prevents unauthorized calls to your Lambda. Note: RapidDev's team has built hundreds of Bubble apps with integrations like this, including the Lambda + Bubble Backend Workflow pattern for S3. If the serverless setup feels overwhelming, book a free scoping call at rapidevelopers.com/contact.

1import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
2import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
3import { randomUUID } from 'crypto';
4
5const s3 = new S3Client({ region: process.env.AWS_S3_REGION });
6
7export const handler = async (event) => {
8  const body = JSON.parse(event.body || '{}');
9  const { fileName, contentType, folder = 'uploads' } = body;
10
11  if (!fileName || !contentType) {
12    return { statusCode: 400, body: JSON.stringify({ error: 'fileName and contentType required' }) };
13  }
14
15  const key = `${folder}/${randomUUID()}/${fileName}`;
16
17  const putCommand = new PutObjectCommand({
18    Bucket: process.env.AWS_S3_BUCKET,
19    Key: key,
20    ContentType: contentType
21  });
22
23  const getCommand = new GetObjectCommand({
24    Bucket: process.env.AWS_S3_BUCKET,
25    Key: key
26  });
27
28  const putUrl = await getSignedUrl(s3, putCommand, { expiresIn: 900 });
29  const getUrl = await getSignedUrl(s3, getCommand, { expiresIn: 86400 });
30
31  return {
32    statusCode: 200,
33    headers: { 'Content-Type': 'application/json' },
34    body: JSON.stringify({ putUrl, getUrl, key })
35  };
36};

In your Bubble app, go to Plugins tab → Add plugins → search 'API Connector' → Install the official plugin by Bubble. Once installed, click 'API Connector' in the left panel to open it. Click 'Add another API' and name it 'AWS Lambda S3'. Set the shared authentication to 'None' for now (security is handled by API Gateway). If you added an API key to your API Gateway endpoint, add a shared header: - Header name: `x-api-key` - Value: `your-api-gateway-key` - Check the **Private** checkbox Click 'Add another call'. Configure the call: - Name: `Get Presigned URL` - Method: POST - URL: `https://your-api-gateway-id.execute-api.us-east-1.amazonaws.com/default/generate-s3-presigned-url` - Add body parameter (JSON): set Body type to 'JSON' - Body fields: `fileName` (text, dynamic), `contentType` (text, dynamic), `folder` (text, value 'uploads') The call configuration looks like: ```json { "method": "POST", "url": "https://your-api-gateway-id.execute-api.us-east-1.amazonaws.com/default/generate-s3-presigned-url", "headers": { "x-api-key": "<private>", "Content-Type": "application/json" }, "body": { "fileName": "<dynamic>", "contentType": "<dynamic>", "folder": "uploads" } } ``` Scroll down to 'Use as' and select **Action** (not Data — this call is triggered by a user action, not a data binding). Click **Initialize call**: in the test data fields, enter `fileName = test.jpg` and `contentType = image/jpeg`. Click Run. If the Lambda is working, Bubble will detect three response fields: `putUrl` (text), `getUrl` (text), and `key` (text). Click Save.

1{
2  "method": "POST",
3  "url": "https://your-api-gateway-id.execute-api.us-east-1.amazonaws.com/default/generate-s3-presigned-url",
4  "headers": {
5    "x-api-key": "<private>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "fileName": "<dynamic>",
10    "contentType": "<dynamic>",
11    "folder": "uploads"
12  }
13}

In Bubble's editor, go to the Backend Workflows section (in the left panel under Workflows). Click 'Add a new Backend Workflow'. Name it `Generate S3 Presigned URL`. Add two parameters that this workflow will accept: - `file_name` (text) - `content_type` (text) In the workflow body, add one action: Plugins → API Connector → Get Presigned URL. Map the parameters: - `fileName` → Parameter file_name - `contentType` → Parameter content_type After the API Connector action, add 'Return data from a backend workflow'. Configure two return fields: - `put_url` = result of Step 1 (Get Presigned URL) → putUrl - `s3_key` = result of Step 1 → key Save the Backend Workflow. Now build the client-side trigger. On the page with your file upload button, add a workflow triggered by the button click: 1. Action: Backend Workflows → Schedule API Workflow → select `Generate S3 Presigned URL`, pass `file_name = FileUploader A's value's name` and `content_type = FileUploader A's value's file type` 2. After the backend workflow returns, use 'Set App State variable' to store `put_url` and `s3_key` 3. Add a 'Make a HTTP PUT request' action (via Toolbox plugin's 'Run JavaScript') targeting the stored `put_url`, with the file bytes from the FileUploader and the Content-Type header matching the file's type 4. After the PUT succeeds, create a database Thing (e.g. Upload) with field `s3_key` = the stored key, linked to the current user This stores the S3 object key — not a URL — in Bubble's database. To display the file later, call the Backend Workflow again to generate a fresh presigned GET URL on demand.

Deploy your Bubble app (or preview it in test mode — Bubble preview runs on HTTPS, which satisfies CORS). Open the page with your file uploader. Select a test image file (JPEG, under 5 MB for the first test). Click the upload button. Watch the Logs tab in Bubble → Workflow logs to see the Backend Workflow execute. You should see the 'Get Presigned URL' API Connector call succeed with a 200 response. Then watch your browser's DevTools Network tab — you should see a PUT request going directly to `s3.amazonaws.com` with a long signed URL and a 200 OK response. In the AWS Console, open your S3 bucket → Objects tab — the uploaded file should appear under the `uploads/` prefix. Finally, set up Bubble privacy rules for your Upload data type. Go to Data tab → Data types → Upload → Privacy. Add a rule: When = Current User is the file's creator → Allow find in searches: Yes, Allow reading all fields: Yes. Without this rule, anyone who can query your Bubble database can potentially read all upload records — even if the S3 files themselves are private. For any Bubble data type that stores references to sensitive user-generated files, privacy rules are the last line of defense inside Bubble's own database layer. They work alongside S3 bucket policies and presigned URL expiry to create a defense-in-depth approach.