How to listen (StorageUploadTask) Firebase upload Success event in Flutter?

Question

I want to listen to firebase upload success event, so that I can give a confirmation to the user about the completion of the particular event.

How to listen success event?

In debug console I'm getting the below information.

I/flutter (22734): EVENT StorageTaskEventType.progress
I/flutter (22734): EVENT StorageTaskEventType.progress
I/flutter (22734): EVENT StorageTaskEventType.progress
I/flutter (22734): EVENT StorageTaskEventType.success

My upload code looks like this.

final StorageReference firebaseStoragereference = 
                          FirebaseStorage
                          .instance
                          .ref()
                          .child('images/myImage1.jpg' );

final StorageUploadTask task = firebaseStoragereference.putFile(sampleImage);

Answer 1

You can do it this way:

final StorageUploadTask uploadTask = ref.putFile(file);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String downloadUrl = await taskSnapshot.ref.getDownloadURL();

Answer 2

In Order to Listen to event, you Need to listen to the Events Streams & you Can Use StreamBuilder to Show the Status.

An Minimal Eg: You Modify to As per your Own Need like- show Progress Bar. In your Build Method where you want show the Status call the Function - _uploadStatus(task);

String _bytesTransferred(StorageTaskSnapshot snapshot) {
    double res = snapshot.bytesTransferred / 1024.0;
    double res2 = snapshot.totalByteCount / 1024.0;
    return '${res.truncate().toString()}/${res2.truncate().toString()}';
  }

Widget _uploadStatus(StorageUploadTask task) {
    return StreamBuilder(
      stream: task.events,
      builder: (BuildContext context, snapshot) {
        Widget subtitle;
        if (snapshot.hasData) {
          final StorageTaskEvent event = snapshot.data;
          final StorageTaskSnapshot snap = event.snapshot;
          subtitle = Text('${_bytesTransferred(snap)} KB sent');
        } else {
          subtitle = const Text('Starting...');
        }
        return ListTile(
          title: s.isComplete && s.isSuccessful
              ? Text(
                  'Done',
                  style: detailStyle,
                )
              : Text(
                  'Uploading',
                  style: detailStyle,
                ),
          subtitle: subtitle,
        );
      },
    );
  }

Answer 3

@anmol.majhail I improved your calc-function like this:

String _bytesTransferred(StorageTaskSnapshot snapshot) {
  double res = (snapshot.bytesTransferred / 1024.0) / 1000;
  double res2 = (snapshot.totalByteCount / 1024.0) / 1000;
  return '${res.toStringAsFixed(2)}/${res2.toStringAsFixed(2)}';
}

With this it will look like this:

3,75/30,32 MB sent

Answer 4

Here for Flutter-Web:

      String _bytesTransferred(fb.UploadTaskSnapshot snapshot) {
        double res = (snapshot.bytesTransferred / 1024.0) / 1000;
        double res2 = (snapshot.totalBytes / 1024.0) / 1000;
        return '${res.toStringAsFixed(2)}/${res2.toStringAsFixed(2)}';
      }

      Widget _uploadStatus(fb.UploadTask task, String startingText, String doneText,
      String uploadingText) {
        return StreamBuilder<fb.UploadTaskSnapshot>(
          stream: task.onStateChanged,
          builder: (BuildContext context, snapshot) {
            Widget subtitle;
            if (snapshot.hasData) {
              final fb.UploadTaskSnapshot snap = snapshot.data;
              subtitle = Text('${_bytesTransferred(snap)} MB');
            } else {
              subtitle = Text(startingText);
            }
            return ListTile(
              title: snapshot.data.state == fb.TaskState.SUCCESS
                  ? Text(doneText)
                  : Text(uploadingText),
              subtitle: subtitle,
            );
          },
        );
      }

Answer 5

屏幕快照中给出了代码，它对我有用，请告诉我一件事，当任务运行在后面时如何添加屏幕