AWS S3

Sign in to the AWS console at console.aws.amazon.com and navigate to S3. Click 'Create bucket'. Choose a globally unique bucket name (e.g. `myapp-user-uploads`). Select the AWS Region closest to most of your users — this affects upload and download latency. Under 'Block Public Access settings', keep all four checkboxes checked if your files should be private (accessed only via presigned URLs). If you want some files publicly readable (like profile photos you serve via CloudFront), you can adjust this later per-prefix. After creating the bucket, click it, go to the 'Permissions' tab, and scroll to 'Cross-origin resource sharing (CORS)'. Click Edit and paste the following CORS configuration. This allows the FlutterFlow web build to PUT files directly to S3 from the browser: Save the CORS config. Without this, browser-based uploads (FlutterFlow web builds) will fail silently or with a CORS error in the browser console — but native iOS/Android builds will work fine because they don't enforce CORS. Configuring CORS now ensures your web and mobile builds behave identically. Create an IAM user next. In the AWS console, go to IAM → Users → Create user. Give it a service-account-style name like `flutterflow-s3-uploader`. Attach a custom inline policy that allows only `s3:PutObject` and `s3:GetObject` on your specific bucket ARN (e.g. `arn:aws:s3:::myapp-user-uploads/*`). Never attach AdministratorAccess or full S3 access to this user. Download the access key ID and secret — you will put these in Firebase Function config in the next step.

1[
2  {
3    "AllowedHeaders": ["*"],
4    "AllowedMethods": ["PUT", "GET"],
5    "AllowedOrigins": ["*"],
6    "ExposeHeaders": ["ETag"]
7  }
8]

This Cloud Function is the heart of the integration. It uses the AWS SDK for JavaScript v3 (`@aws-sdk/s3-request-presigner` and `@aws-sdk/client-s3`) to generate a short-lived presigned URL. The function accepts a POST request with `fileName` and `contentType` in the body, constructs the S3 object key (e.g. `uploads/{userId}/{fileName}`), calls `getSignedUrl()` with a `PutObjectCommand`, and returns the presigned URL to FlutterFlow. The AWS access key ID and secret are stored in Firebase Function config — they never appear in source code. Set them with the Firebase CLI: `firebase functions:config:set aws.access_key_id="AKIA..." aws.secret_access_key="xxx" aws.region="us-east-1" aws.bucket="myapp-user-uploads"`. The presigned URL is valid for the duration you specify — 900 seconds (15 minutes) is a good default. Generate the presigned URL right when the user is about to upload and use it immediately. Do not cache presigned URLs in App State across sessions; they expire and become invalid. You need a Firebase Blaze (pay-as-you-go) plan to deploy Cloud Functions. The function itself is lightweight and typically falls within the free tier of 2 million invocations per month.

1// Firebase Cloud Function — S3 presigned URL generator (index.js)
2const functions = require('firebase-functions');
3const { S3Client, PutObjectCommand, GetObjectCommand } = require('@aws-sdk/client-s3');
4const { getSignedUrl } = require('@aws-sdk/s3-request-presigner');
5
6const s3 = new S3Client({
7  region: functions.config().aws.region,
8  credentials: {
9    accessKeyId: functions.config().aws.access_key_id,
10    secretAccessKey: functions.config().aws.secret_access_key,
11  },
12});
13
14exports.getPresignedUploadUrl = functions.https.onRequest(async (req, res) => {
15  res.set('Access-Control-Allow-Origin', '*');
16  if (req.method === 'OPTIONS') {
17    res.set('Access-Control-Allow-Methods', 'POST');
18    res.set('Access-Control-Allow-Headers', 'Content-Type');
19    return res.status(204).send('');
20  }
21
22  const { fileName, contentType, userId } = req.body;
23  if (!fileName || !contentType) {
24    return res.status(400).json({ error: 'fileName and contentType are required' });
25  }
26
27  const key = `uploads/${userId || 'anonymous'}/${Date.now()}_${fileName}`;
28  const bucket = functions.config().aws.bucket;
29
30  try {
31    const putUrl = await getSignedUrl(
32      s3,
33      new PutObjectCommand({ Bucket: bucket, Key: key, ContentType: contentType }),
34      { expiresIn: 900 } // 15 minutes
35    );
36    const getUrl = await getSignedUrl(
37      s3,
38      new GetObjectCommand({ Bucket: bucket, Key: key }),
39      { expiresIn: 86400 } // 24 hours for viewing
40    );
41    return res.status(200).json({ putUrl, getUrl, key });
42  } catch (err) {
43    console.error('S3 presign error:', err);
44    return res.status(500).json({ error: err.message });
45  }
46});

The upload flow needs two API Calls in sequence: one to get the presigned URLs from your Cloud Function, and one to actually PUT the file to S3 using that URL. In FlutterFlow, click 'API Calls' in the left navigation, click '+ Add' → 'Create API Group', and name it 'S3Upload'. First API Call — 'GetPresignedUrl': Method POST, URL = your Cloud Function URL (e.g. `https://us-central1-yourproject.cloudfunctions.net/getPresignedUploadUrl`). Add a JSON Body with variables for `fileName` (String), `contentType` (String), and `userId` (String). In the Response & Test tab, parse `$.putUrl` and `$.getUrl` and `$.key` as JSON Paths. Second API Call — 'UploadToS3': Method PUT, URL = `{{presignedPutUrl}}` where `presignedPutUrl` is a variable. Add a Header `Content-Type: {{contentType}}` matching the content type you signed. The body is the raw file bytes — this is where FlutterFlow's API Call handling has a limitation: API Calls in FlutterFlow are designed for JSON bodies, not raw binary data. For simple image uploads in many cases you can encode the image as a base64 data URI and handle it server-side, but for true binary PUT to S3, a Custom Action (Dart) using the `http` package with `put()` and binary bytes is more reliable. If your app targets mobile only, this Custom Action approach works well. For a web-compatible solution, route the binary upload through a Cloud Function that accepts a base64 body and streams it to S3 using the S3 SDK's `Body` parameter.

1{
2  "step1_get_presigned_url": {
3    "method": "POST",
4    "url": "https://us-central1-yourproject.cloudfunctions.net/getPresignedUploadUrl",
5    "body": {
6      "fileName": "{{fileName}}",
7      "contentType": "{{contentType}}",
8      "userId": "{{userId}}"
9    }
10  },
11  "step2_put_to_s3": {
12    "method": "PUT",
13    "url": "{{presignedPutUrl}}",
14    "headers": {
15      "Content-Type": "{{contentType}}"
16    },
17    "body": "<raw file bytes>"
18  }
19}

The complete upload action flow starts when a user selects a file. In FlutterFlow, add an 'Upload/Save Media' action or a 'Store Media' action (depending on your FlutterFlow version) to an image picker button or tap gesture. This stores the selected file in a variable (as bytes or a local path, depending on the platform). In the Action Flow Editor, after the media picker action, add a 'Backend/API Call' action targeting 'S3Upload → GetPresignedUrl'. Pass the file name (from the picker result) and the appropriate content type (`image/jpeg`, `image/png`, `application/pdf`, etc.) as variables. Store the returned `putUrl` and `getUrl` in Page State variables. Next in the Action Flow, add a second API Call action for 'S3Upload → UploadToS3', passing the stored `putUrl` as the URL variable and the file bytes as the body. If the FlutterFlow API Call body cannot handle raw bytes for your file type, you'll need to use a Custom Action here — Dart's `http.put(Uri.parse(putUrl), body: fileBytes, headers: {'Content-Type': contentType})` handles this cleanly. After the successful upload, store the `getUrl` in your backend database (Firestore document, Supabase row) so it can be retrieved later. Display the uploaded file immediately in the UI by binding an Image widget to the Page State `getUrl` variable. Show a loading indicator during the upload process using a Boolean Page State variable toggled before and after the API Call sequence.

1// Custom Action for binary S3 PUT upload (custom_action.dart)
2import 'dart:typed_data';
3import 'package:http/http.dart' as http;
4
5Future<bool> uploadToS3(
6  String presignedUrl,
7  Uint8List fileBytes,
8  String contentType,
9) async {
10  try {
11    final response = await http.put(
12      Uri.parse(presignedUrl),
13      headers: {'Content-Type': contentType},
14      body: fileBytes,
15    );
16    return response.statusCode == 200;
17  } catch (e) {
18    return false;
19  }
20}

After a successful upload, you need to store the file's location so it can be retrieved later. The `key` returned by your Cloud Function (e.g. `uploads/user123/1234567890_photo.jpg`) is the stable identifier for the object. The presigned GET URL expires (24 hours in the example Cloud Function), so you should not store the presigned URL itself — store the object key instead. In Firestore or Supabase, save the S3 object key to the user's profile document or the relevant record (e.g. `avatar_s3_key: 'uploads/user123/1234567890_photo.jpg'`). When you need to display the file, make a fresh call to your Cloud Function to generate a new presigned GET URL from the stored key. Add a second endpoint to the Cloud Function (e.g. `getPresignedDownloadUrl`) that accepts a `key` parameter and returns a fresh GET URL. Alternatively, if you want publicly accessible files (like profile photos that can be shown to anyone), you can configure a CloudFront distribution in front of your S3 bucket. CloudFront provides a stable CDN URL (`https://xxxx.cloudfront.net/uploads/user123/photo.jpg`) that doesn't expire. Store the CloudFront URL instead of the S3 presigned URL — it works indefinitely without regeneration. CloudFront is outside the scope of this guide but is the recommended pattern for any file that needs to be publicly viewable. If you'd rather skip the backend setup entirely, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.