How to Implement a Custom File Management System in FlutterFlow

In your Firebase console, you do not need to manually create collections — FlutterFlow will generate them from your schema. In FlutterFlow, go to Firestore > Create Collection. Name the first collection `folders`. Add fields: `name` (String), `ownerId` (String), `parentId` (String, nullable — null means root), `createdAt` (Timestamp), `path` (String, stores slash-joined ancestor IDs for breadcrumbs). Create a second collection named `files` with fields: `name` (String), `ownerId` (String), `folderId` (String — parent folder doc ID), `storageUrl` (String), `storagePath` (String), `mimeType` (String), `sizeBytes` (Integer), `createdAt` (Timestamp), `updatedAt` (Timestamp). Set Firestore Security Rules so only `request.auth.uid == resource.data.ownerId` can read/write each document.

Create a new page called `FileManager`. Add two Page State variables: `currentFolderId` (String, default empty — means root) and `breadcrumbs` (JSON Array, default `[]`). Add a Column widget at the top for the breadcrumb bar — use a Row with a ListView of breadcrumb items, each showing the folder name with a tap action that sets `currentFolderId` to that folder's ID. Below that, add a ListView for subfolders: query the `folders` collection where `parentId == currentFolderId` and `ownerId == currentUser.uid`, ordered by `name`. Add a second ListView for files: query `files` where `folderId == currentFolderId` and `ownerId == currentUser.uid`. Each list tile should show name, size (formatted), and a three-dot menu for Rename, Move, and Delete.

Add a FloatingActionButton with a + icon. On tap, show a bottom sheet dialog with a TextField for folder name and a Create button. The Create button action should: validate the name is not empty, then run a Firestore Create Document action on the `folders` collection setting `name` to the TextField value, `ownerId` to `currentUser.uid`, `parentId` to `currentFolderId` page state, `createdAt` to current time, and `path` to a concatenation of the current folder's path + `/` + the new doc ID (use a Custom Function for this). For navigation, wire the folder list tile's on-tap to: update `currentFolderId` page state to the tapped folder's document ID, and append `{id, name}` to the `breadcrumbs` page state array. Tapping a breadcrumb item should slice the array back to that index and update `currentFolderId`.

Add an Upload File action (FlutterFlow built-in) triggered by a button or FAB option. After the upload completes, the action returns the download URL and storage path. Chain a second action: Firestore Create Document on `files` with `name` set to the extracted filename (use a Custom Function to parse the filename from the storage path), `ownerId` = currentUser.uid, `folderId` = currentFolderId page state, `storageUrl` = returned URL, `storagePath` = returned storage path, `mimeType` = detected MIME type (Custom Function from file extension), `sizeBytes` = file size in bytes (available from the upload result), `createdAt` and `updatedAt` = current time. The file list query will automatically refresh because you are using a live Firestore query widget.

For Rename: show a dialog with a pre-filled TextField containing the current name. On confirm, run a Firestore Update Document action on the specific file or folder document, setting only the `name` field (and `updatedAt` for files). No Storage operation is needed — the bytes do not move. For Move: show a folder picker (a new bottom sheet that queries `folders` where `ownerId == currentUser.uid` as a ListView). On folder selection, run Firestore Update Document on the file's document, setting `folderId` to the selected folder's ID. For folders, set `parentId` to the new parent's ID and update `path`. Neither operation touches Firebase Storage at all.

For search: add a SearchBar widget at the top of the page. Wire its `onTextChanged` event to set a page state variable `searchQuery`. Add a conditional: if `searchQuery` is not empty, show a third ListView that queries `files` where `ownerId == currentUser.uid` and `name` contains `searchQuery` (Firestore `>=` / `<=` trick or array-contains on a `nameTokens` field). For quota: add a subtitle row showing `usedMB / totalMB`. Create a Cloud Function (callable) that queries all files for the current user, sums `sizeBytes`, and returns the total. Call this function on page load and store the result in a page state variable. Display a LinearProgressIndicator showing used vs. a configurable quota limit (store the limit in a Firestore `userSettings` document).

Deleting a file requires two steps: remove the Firestore document AND delete the object from Firebase Storage. FlutterFlow's built-in Firestore Delete action handles the Firestore side. For Storage deletion, create a Firebase Cloud Function (callable) named `deleteFile` that accepts `storagePath`, verifies the caller owns that file by checking Firestore, then calls `admin.storage().bucket().file(storagePath).delete()`. In FlutterFlow, wire the Delete menu option to: first call the `deleteFile` Cloud Function with the file's `storagePath`, then run Firestore Delete Document on the `files` document. For folder deletion, recursively delete all child files and folders in the Cloud Function before deleting the folder document.

1// Firebase Cloud Function — index.js
2const { onCall } = require('firebase-functions/v2/https');
3const { getFirestore } = require('firebase-admin/firestore');
4const { getStorage } = require('firebase-admin/storage');
5
6exports.deleteFile = onCall(async (request) => {
7  const uid = request.auth?.uid;
8  if (!uid) throw new Error('Unauthenticated');
9
10  const { storagePath, fileDocId } = request.data;
11
12  // Verify ownership
13  const db = getFirestore();
14  const fileDoc = await db.collection('files').doc(fileDocId).get();
15  if (!fileDoc.exists || fileDoc.data().ownerId !== uid) {
16    throw new Error('Not authorized');
17  }
18
19  // Delete from Storage
20  await getStorage().bucket().file(storagePath).delete();
21
22  // Delete Firestore document
23  await db.collection('files').doc(fileDocId).delete();
24
25  return { success: true };
26});