Single progress bar for uploading multiple file to firebase storage

[Rakesh Singh]

I want to show progress of file uploading to firebase. I am able to show progress using snapshotEvents if only one file is uploaded. How can I show progress in a single bar when multiple files are uploaded.

[Rakesh Singh]

This is the code (for flutter web)

On uploading multiple file I want only one UploadTaskListTile containing sum of byte transferred of all files/sum of byte transferred of all files.  

// ignore: avoid_web_libraries_in_flutter

import 'dart:html' as dartHtml;

import 'package:firebase_storage/firebase_storage.dart';

import 'package:flutter/material.dart';

class Home extends StatefulWidget {

  @override

  _HomeState createState() => _HomeState();

}

class _HomeState extends State<Home> {

  

  List<dartHtml.File> _files;

  // ignore: unused_field

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  // ignore: unused_field

  List<UploadTask> _tasks = <UploadTask>[];

void openFileExplorer(){

  dartHtml.InputElement uploadInput = dartHtml.FileUploadInputElement()..multiple = true;

    uploadInput.click();

    uploadInput.onChange.listen((event) {

     _files = uploadInput.files;

      for (var i = 0; i < _files.length; i++) {

        final reader = dartHtml.FileReader();

        reader.readAsDataUrl(_files[i]);

        reader.onLoadEnd.listen((event) {

         upload(_files[i],i);

          

        });

      }

    });

}

upload(file,index){

  FirebaseStorage fs = FirebaseStorage.instance;

    final dateTime = DateTime.now();

    // final userId = user.id;

    final path = '$index$dateTime\_';

    Reference storageRef =

        fs.ref().child(path + index.toString());

    final UploadTask uploadTask = storageRef.putBlob(file);

    setState(() {

      _tasks.add(uploadTask);

    });    

}

  

  @override

  Widget build(BuildContext context) {

    final List<Widget> children = <Widget>[];

    _tasks.forEach((UploadTask task) {

      final Widget tile = UploadTaskListTile(

        task: task,

        onDismissed: () => setState(() => _tasks.remove(task)),

       // onDownload: () => downloadFile(task.snapshot.ref),

      );

      children.add(tile);

    });

 

    return new MaterialApp(

      home: new Scaffold(

        key: _scaffoldKey,

        appBar: new AppBar(

          title: Text('Title'),

        ),

        body: new Container(

          padding: EdgeInsets.all(20.0),

          child: Column(

            crossAxisAlignment: CrossAxisAlignment.start,

            mainAxisAlignment: MainAxisAlignment.start,

            children: <Widget>[

              

              // ignore: deprecated_member_use

              OutlineButton(

                onPressed: () => openFileExplorer(),

                child: new Text("Open file picker"),

              ),

              SizedBox(

                height: 20.0,

              ),

              Flexible(

                child: ListView(

                  children: children,

                ),

              ),

            ],

          ),

        ),

      ),

    );

  }

   

}

class UploadTaskListTile extends StatelessWidget {

   const UploadTaskListTile(

      {Key key, this.task, this.onDismissed, this.onDownload})

      : super(key: key);

 

  final UploadTask task;

  final dartHtml.VoidCallback onDismissed;

  final dartHtml.VoidCallback onDownload;

  String _bytesTransferred(TaskSnapshot snapshot) {

    return '${snapshot.bytesTransferred}/${snapshot.totalBytes}';

  }

  @override

  Widget build(BuildContext context) {

    return StreamBuilder<TaskSnapshot>(

      stream: task.snapshotEvents,

      builder: (BuildContext context,

          AsyncSnapshot<TaskSnapshot> asyncSnapshot) {

        Widget subtitle;

        if (asyncSnapshot.hasData) {

          // ignore: unused_local_variable

          final TaskSnapshot event = asyncSnapshot.data;

          

          subtitle = Text('${_bytesTransferred(event)} bytes sent');

        } else {

          subtitle = const Text('Starting...');

        }

        return Dismissible(

          key: Key(task.hashCode.toString()),

          onDismissed: (_) => onDismissed(),

          child: ListTile(

            title: Text('Upload Task #${task.hashCode}'),

            subtitle: subtitle,

            

          ),

        );

      },

    );

  }

}

On Sat, Mar 27, 2021 at 2:25 AM Rakesh Singh <rakeshsh...@gmail.com> wrote:

I want to show progress of file uploading to firebase. I am able to show progress using snapshotEvents if only one file is uploaded. How can I show progress in a single bar when multiple files are uploaded.

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/182988e5-e79e-4950-a5fe-ca1e1e0cefa3n%40googlegroups.com.