How to Handle File Uploads and Downloads in FlutterFlow

Before any uploads work, Firebase Storage needs security rules that allow authenticated users to read and write their own files. Open Firebase console > Storage > Rules and set rules that allow read to any authenticated user and write only to paths under the user's own UID. A good starting pattern is: allow read if request.auth != null, allow write if request.auth.uid == [path segment matching UID]. Also set a maximum upload size rule to prevent oversized files: allow write if request.resource.size < 50 * 1024 * 1024 (50MB limit). In FlutterFlow, go to Project Settings > Firebase > Storage and confirm the bucket URL is connected. Without correct security rules, uploads will silently fail with a 403 permission error.

1// Firebase Storage Security Rules
2rules_version = '2';
3service firebase.storage {
4  match /b/{bucket}/o {
5    // Users can read any file (adjust if files should be private)
6    match /{allPaths=**} {
7      allow read: if request.auth != null;
8    }
9    // Users can only write to their own folder
10    match /users/{userId}/{allPaths=**} {
11      allow write: if request.auth != null
12        && request.auth.uid == userId
13        && request.resource.size < 50 * 1024 * 1024
14        && request.resource.contentType.matches('image/.*|application/pdf|text/.*');
15    }
16  }
17}

In FlutterFlow, select any Button or IconButton on your page and open the Action Flow. Add an Upload Photo/Video action (under Utilities > Upload Data). Set the storage path to users/[Current User UID]/images/[timestamp]. Choose whether to allow the camera, gallery, or both. Store the returned upload URL in a page state variable imageUrl. After the upload completes, add a Create Document action to write a Firestore document in a user_files collection with: user_id (Current User UID), file_name (the original filename), download_url (imageUrl page state), file_type (image), file_size_bytes (from the Upload action output), created_at (server timestamp). This two-step pattern — upload then record metadata — is the foundation of all file management in FlutterFlow.

For PDFs, Word documents, and other non-image files, create a Custom Action named pickAndUploadFile. It takes uploadPath (String) and returns a Map with keys: download_url, file_name, file_size, mime_type. Inside the action, use file_picker to open the file selector (filtering to allowed extensions), read the file bytes, upload to Firebase Storage using firebase_storage's putData method, retrieve the download URL, and return all metadata. In the FlutterFlow Action Flow, call this action on a button tap, then use the returned values to create a Firestore document in user_files. Show a CircularProgressIndicator while the action is running (set a page state isUploading to true before the action and false after).

1import 'package:file_picker/file_picker.dart';
2import 'package:firebase_storage/firebase_storage.dart';
3import 'package:firebase_auth/firebase_auth.dart';
4import 'package:mime/mime.dart';
5
6Future<Map<String, dynamic>> pickAndUploadFile(String uploadPath) async {
7  final result = await FilePicker.platform.pickFiles(
8    type: FileType.custom,
9    allowedExtensions: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'txt', 'zip'],
10    withData: true,
11  );
12  if (result == null || result.files.isEmpty) return {};
13
14  final file = result.files.first;
15  final bytes = file.bytes;
16  if (bytes == null) return {};
17
18  final uid = FirebaseAuth.instance.currentUser?.uid ?? 'unknown';
19  final fileName = file.name;
20  final path = 'users/$uid/$uploadPath/$fileName';
21  final mimeType = lookupMimeType(fileName) ?? 'application/octet-stream';
22
23  final ref = FirebaseStorage.instance.ref(path);
24  final uploadTask = ref.putData(bytes, SettableMetadata(contentType: mimeType));
25  final snapshot = await uploadTask.whenComplete(() {});
26  final downloadUrl = await snapshot.ref.getDownloadURL();
27
28  return {
29    'download_url': downloadUrl,
30    'file_name': fileName,
31    'file_size': file.size,
32    'mime_type': mimeType,
33    'storage_path': path,
34  };
35}

The basic file upload Custom Action in Step 3 uses whenComplete() which only returns after the upload finishes. For large files, users need a progress indicator. Create a second Custom Action named uploadWithProgress that accepts the same parameters plus an onProgress callback (void Function(double percent)). Inside, use UploadTask.snapshotEvents stream to listen for progress updates, calling onProgress with (snapshot.bytesTransferred / snapshot.totalBytes * 100). In FlutterFlow, this requires a Custom Widget or a page state variable approach: update a page state variable uploadProgress (double 0.0 to 1.0) from the action, and bind a LinearProgressIndicator's value property to this page state variable. Display the percentage as text beside the progress bar.

1import 'dart:async';
2import 'package:firebase_storage/firebase_storage.dart';
3
4Future<String> uploadWithProgress(
5  String storagePath,
6  List<int> fileBytes,
7  String mimeType,
8  void Function(double) onProgress,
9) async {
10  final ref = FirebaseStorage.instance.ref(storagePath);
11  final task = ref.putData(
12    Uint8List.fromList(fileBytes),
13    SettableMetadata(contentType: mimeType),
14  );
15  task.snapshotEvents.listen((snapshot) {
16    if (snapshot.totalBytes > 0) {
17      onProgress(snapshot.bytesTransferred / snapshot.totalBytes);
18    }
19  });
20  await task.whenComplete(() {});
21  return await ref.getDownloadURL();
22}

Firebase Storage download URLs are permanent (unless the file is deleted or the URL is revoked). To trigger a download in FlutterFlow, use the Launch URL action on any button, passing the download_url field from the Firestore user_files document. On mobile, this opens the file in the device's default handler — PDFs open in the PDF viewer, images open in the gallery. For in-app file viewing, use a Custom Widget with webview_flutter to display PDFs and images inside the app without leaving. To show a file list, create a ListView bound to the user_files Firestore collection filtered by user_id equals Current User UID, showing file_name, file_type icon (based on mime_type), formatted file size using a Custom Function, and the upload date.