How to Build a Custom File Uploader With Progress Tracking in FlutterFlow

Open Custom Code in FlutterFlow and create a new Custom Action named pickMultipleFiles. Add the file_picker dependency. The action calls FilePicker.platform.pickFiles(allowMultiple: true, type: FileType.any) and returns the list of PlatformFile objects. Add an Action Output of type JSON List so the parent page can receive the file names and paths. Call this action from a Select Files button tap.

1// Custom Action: pickMultipleFiles
2import 'package:file_picker/file_picker.dart';
3
4Future<List<dynamic>> pickMultipleFiles() async {
5  final result = await FilePicker.platform.pickFiles(
6    allowMultiple: true,
7    type: FileType.any,
8  );
9  if (result == null) return [];
10  return result.files.map((f) => {
11    'name': f.name,
12    'path': f.path,
13    'size': f.size,
14  }).toList();
15}

Add a Page State variable selectedFiles (JSON List) and uploadProgress (JSON, default empty map). When pickMultipleFiles returns, set selectedFiles to the result. Add a ListView with Generate Dynamic Children bound to selectedFiles. Each child row contains a Row with: Text showing the file name, Text showing file size formatted in KB/MB, a LinearPercentIndicator bound to uploadProgress[fileName] defaulting to 0.0, and a status icon (check or spinner).

Create a Custom Action named uploadFilesWithProgress that accepts the selected files list as a parameter. For each file, create a Firebase Storage reference at users/{uid}/uploads/{fileName}, call ref.putFile(File(path)), and listen to uploadTask.snapshotEvents. On each snapshot, calculate progress as bytesTransferred / totalBytes and update the Page State uploadProgress map entry for that file. Use Future.wait to run all uploads in parallel. After each upload completes, call ref.getDownloadURL() and collect all URLs into a return list.

1// Custom Action: uploadFilesWithProgress
2import 'dart:io';
3import 'package:firebase_storage/firebase_storage.dart';
4
5Future<List<String>> uploadFilesWithProgress(
6  List<dynamic> files,
7  Future<void> Function(String fileName, double progress) onProgress,
8) async {
9  final storage = FirebaseStorage.instance;
10  final uid = currentUserUid;
11  final futures = files.map((file) async {
12    final name = file['name'] as String;
13    final path = file['path'] as String;
14    final ref = storage.ref('users/$uid/uploads/$name');
15    final task = ref.putFile(File(path));
16    task.snapshotEvents.listen((snap) {
17      final pct = snap.bytesTransferred / snap.totalBytes;
18      onProgress(name, pct);
19    });
20    await task;
21    return await ref.getDownloadURL();
22  });
23  return Future.wait(futures);
24}

Add an Upload All button below the file list. On Tap, call the uploadFilesWithProgress Custom Action passing the selectedFiles Page State. Inside the action callback, update uploadProgress by setting the key for each filename to the current progress value. This drives the LinearPercentIndicator widgets in the ListView. When the action returns the list of download URLs, store them in a Page State variable downloadUrls.

After uploadFilesWithProgress completes and downloadUrls is populated, create or update a Firestore document. For example, in an uploads collection create a document with fields: userId (current user), fileUrls (the downloadUrls list), uploadedAt (server timestamp), and fileCount (number of files). Show a success SnackBar confirming all files uploaded. Optionally reset the selectedFiles and uploadProgress Page State variables to clear the UI for the next batch.