any types of file upload on firebase in flutter

file-upload-flutter-web.md

1. Package Used

universal_html: ^2.0.8
file_picker: ^4.2.1
firebase_storage: ^10.2.17
firebase_core: ^1.17.1
uuid: ^3.0.7

2. Custom Function

import 'dart:developer' as dev;
import 'package:path/path.dart' as path;
import 'package:pro_coach_app/imports.dart';
import 'package:universal_html/html.dart' as html;
import 'package:file_picker/file_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:uuid/uuid.dart';


FilePickerResult _attachmentFile;
File _file;
UploadTask task;
var uuid = Uuid();
Future uploadFile({Function() setState, bool loading, String imageURL, Function(String, bool) updatedImageURL, String pathNameOnFirebase}) async {

  /// For Web
  if (kIsWeb) {

    dev.log("***** Image Uploading to Firebase Storage In Web *****");
    html.FileUploadInputElement input = html.FileUploadInputElement()
      ..accept = '/*'
      ..multiple = false;
    FirebaseStorage fs = FirebaseStorage.instance;
    input.click();
    input.onChange.listen((event) {
      final file = input.files.first;
      loading = true;
      setState();
      {
        updatedImageURL('', loading);
      }

      final reader = html.FileReader();
      reader.readAsDataUrl(file);

      reader.onLoadEnd.listen((event) async {
        var snapshot = await fs.ref().child('$pathNameOnFirebase/${uuid.v1()}').putBlob(file);
        String downloadUrl = await snapshot.ref.getDownloadURL();
        loading = true;
        imageURL = downloadUrl;
        dev.log('Image URL: ${imageURL.toString()}');
        loading = false;
        setState();
        {
          updatedImageURL(imageURL, loading);
        }
      });
    });
  }

    /// Other Platform
  else {
        dev.log("***** Image Uploading to Firebase Storage In Android/Ios *****");
    try {

      _attachmentFile = (await FilePicker.platform.pickFiles(type: FileType.any));
      if (_attachmentFile != null && _attachmentFile.files.isNotEmpty) {
        _file = File(_attachmentFile.files.single.path);
        final ref = FirebaseStorage.instance.ref('$pathNameOnFirebase/${path.basename(uuid.v1())}');
        task = ref.putFile(_file);
        final snapshot = await task.whenComplete(() {});
        final url = await snapshot.ref.getDownloadURL();
        dev.log('URL: ' + url);
        loading = true;
        imageURL = url;
        dev.log('Image URL: ${imageURL.toString()}');
        setState();
        {
          updatedImageURL(imageURL, loading);
        }
      } else {
        loading = false;
        setState();
        {
          updatedImageURL('', loading);
        }

        dev.log('Image Upload Else');
      }
    } catch (e) {
      dev.log(e.toString());
      loading = false;
      setState();
      {
        updatedImageURL('', loading);
      }

      dev.log('Image Upload Error');
    }
  }
}

3. How to Used in UI

3.1 Variable Declaration

String _profileImage='';
bool _profileLoading =false;

setState(() {});
    _profileLoading = true;
    uploadFile(
    pathNameOnFirebase: 'Group-Avatar',
    imageURL: _profileImage,
    loading: _profileLoading,
    updatedImageURL: (url, loading) {
        setState(() {
            _profileImage = url;
            _profileLoading = loading;
            });
        },
        setState: () {
        dev.log('State Refresh');
            }).whenComplete(() {
                setState(() {
                _profileLoading = false;
                dev.log('Loading: ${_profileLoading.toString()}');
                dev.log('Added URL: ${_profileImage.toString()}');
              });
            });