How to Set Up a Cloud Storage Integration in FlutterFlow

In the Firebase Console, go to Storage and open the Rules tab. Replace the default rules with authentication-scoped rules. Allow users to read and write only within their own folder path: match /users/{uid}/{allPaths=**} with the condition request.auth.uid == uid. Add a separate rule for a public folder that allows read access to all authenticated users but write access only to admins. Set maximum file size limits in the rules using request.resource.size < 10 * 1024 * 1024 for a 10MB cap. Publish the rules.

1rules_version = '2';
2service firebase.storage {
3  match /b/{bucket}/o {
4    // User-specific files
5    match /users/{uid}/{allPaths=**} {
6      allow read, write: if request.auth != null 
7        && request.auth.uid == uid
8        && request.resource.size < 10 * 1024 * 1024;
9    }
10    // Public files (read: any auth user, write: admin only)
11    match /public/{allPaths=**} {
12      allow read: if request.auth != null;
13      allow write: if request.auth.token.admin == true;
14    }
15  }
16}

On your page, add a FlutterFlowUploadButton widget. In the Properties Panel, set the upload type to Firebase Storage. Set the storage folder path to users/{currentUser.uid}/documents/ so each user's files go into their own folder. Configure allowed file types: for images use image/jpeg, image/png; for documents add application/pdf. Set a maximum file size. The widget automatically uploads the file and returns the download URL as an Action Output Variable. After upload completes, create a Firestore document in a user_files collection with fields: fileName (String), fileUrl (String, the download URL), fileType (String), fileSize (Integer), uploadedAt (Timestamp), and userId (String).

Create a FilesPage with a ListView bound to a Backend Query on the user_files collection, filtered by userId equals currentUser.uid, ordered by uploadedAt descending. Each row displays a Container with a Row inside: an Icon widget showing the file type icon (image icon for images, description icon for PDFs, insert_drive_file for others — use conditional logic on fileType), the fileName as Text, the file size formatted as Text, and an IconButton for delete. Add a tap action on the Container that opens the file: for images, navigate to a fullscreen Image viewer; for PDFs, open in a WebView or use url_launcher to open the download URL in the browser.

Create a Custom Action named deleteFile that takes the Storage file path and the Firestore document reference as parameters. The action first deletes the file from Firebase Storage using FirebaseStorage.instance.ref(path).delete(), then deletes the corresponding Firestore document. Wire this to the delete IconButton on each file row with a confirmation dialog first. Use Show Dialog with a question asking 'Are you sure you want to delete this file?' with Confirm and Cancel buttons. Only call the deleteFile action when the user confirms.

1// Custom Action: deleteFile
2import 'package:firebase_storage/firebase_storage.dart';
3import 'package:cloud_firestore/cloud_firestore.dart';
4
5Future<void> deleteFile(
6  String storagePath,
7  DocumentReference fileDocRef,
8) async {
9  // Delete from Storage
10  await FirebaseStorage.instance.ref(storagePath).delete();
11  // Delete Firestore metadata
12  await fileDocRef.delete();
13}

For image files, add a GridView alternative to the ListView that shows thumbnail previews. Use the Image widget with the fileUrl and BoxFit.cover inside square Containers. Add a toggle between list view and grid view using a Page State boolean and Conditional Builder. For upload progress, wrap the FlutterFlowUploadButton action flow with a Page State isUploading boolean: set true before upload, false after. Show a LinearProgressIndicator when isUploading is true. Add a SnackBar notification on successful upload showing the file name and a checkmark.