Anthony Champagne
ย ยทย Unlocked

Live Progress Bar - Video Upload Progress (Solved!)

Database & APIs

I have officially solved the live progress bar for uploading videos.

Copy and paste the code below with the following arguments:

file (uploaded file)

userid (string)

You will then need a Progress Bar UI Widget.

Make a new app state - uploadProgress App state (not persisted) set this to a double.

Attach the uploadProgress state to the Progess Bar UI widget for the Text and Number Value.

For the text format the number to percentage.

What have you tried so far?
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:firebase_storage/firebase_storage.dart';
import 'dart:async';

Future<String> uploadToFirebase(FFUploadedFile file, String userId) async {
  // Create a reference to the file location in Firebase Storage
  Reference storageReference = FirebaseStorage.instance
      .ref()
      .child('users/$userId/uploads/${file.name}');

  // Start the upload task
  UploadTask uploadTask = storageReference.putData(file.bytes!);

  // Listen to the upload progress
  uploadTask.snapshotEvents.listen((TaskSnapshot snapshot) {
    double progress =
        snapshot.bytesTransferred.toDouble() / snapshot.totalBytes.toDouble();

    // Update the progress in the app state
    FFAppState().uploadProgress = progress;

    // Trigger a state update in FlutterFlow
    FFAppState().update(() {});

    print('Upload Progress: ${(progress * 100).round()}%');
  });

  // Wait for the upload to complete
  TaskSnapshot taskSnapshot = await uploadTask;

  // Get the download URL of the uploaded file
  String downloadURL = await taskSnapshot.ref.getDownloadURL();

  // Set progress to 100 when upload is complete
  FFAppState().uploadProgress = 1.0; // 1.0 represents 100%

  // Ensure final update is reflected
  FFAppState().update(() {});

  return downloadURL;
}
Did you check FlutterFlow's Documentation for this topic?
No
6
4 replies