firebase_storage for web

[Neifen]

Now I wasn't sure how to title this question because I am not sure where the issue is, I'm also new to flutter, dart, github kinda so I'm sure there is a lot of things I am doing wrong here. Nevertheless here is the story.

Intro

So yesterday I wanted to use firebase_storage for my new flutter web project. I quickly realized that the flutterfire package for firebase_storage doesn't work for web. After researching a little bit I came back here and all of a sudden there was a PR by @ditman that had been accepted to change that ( #3917).

Because I am impatient and I don't want to wait for the release I decided to add the dependency in my yaml directly from git. My first attempt didn't work

  firebase_core: "^0.5.2"  
  firebase_storage:  
    git:  
      url: [email protected]:FirebaseExtended/flutterfire.git  
      path: packages/firebase_storage/firebase_storage

because of that:

Because every version of firebase_storage from git depends on firebase_storage_web any which is forbidden, firebase_storage from git is forbidden.
So, because salvy_calendar depends on firebase_storage from git, version solving failed.

A new branch

So I decided to add the dependency directly on the branch:

  firebase_core: "^0.5.2"  
  firebase_storage:  
    git:  
      url: [email protected]:ditman/flutterfire.git  
      branch: firebase-storage-web  
      path: packages/firebase_storage/firebase_storage

I didn't have any problems this far so I tried to test it with a simple "getList" request in the firebase storage. I will first post the error that I got and all the code that is relevant to the test to make sure I didn't forget anything. Also I should add that before running this I did a "flutter clean", "pub get" and "flutter build web", then started the webserver on chrome with "flutter run".

My Error:

Instance of 'Future'
Error: MissingPluginException(No implementation found for method Reference#listAll on channel plugins.flutter.io/firebase_storage)
at Object.throw [as throw] (http://localhost:51099/dart_sdk.js:4339:11)
at MethodChannel._invokeMethod (http://localhost:51099/packages/flutter/src/services/system_channels.dart.lib.js:944:21)
at _invokeMethod.next ()
at http://localhost:51099/dart_sdk.js:37679:33
at _RootZone.runUnary (http://localhost:51099/dart_sdk.js:37533:58)
at _FutureListener.thenAwait.handleValue (http://localhost:51099/dart_sdk.js:32507:29)
at handleValueCallback (http://localhost:51099/dart_sdk.js:33054:49)
at Function._propagateToListeners (http://localhost:51099/dart_sdk.js:33092:17)
at _Future.new.[_completeWithValue] (http://localhost:51099/dart_sdk.js:32935:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:51099/dart_sdk.js:32957:35)
at Object._microtaskLoop (http://localhost:51099/dart_sdk.js:37794:13)
at _startMicrotaskLoop (http://localhost:51099/dart_sdk.js:37800:13)
at http://localhost:51099/dart_sdk.js:33309:9

my index.html:

(Here I'm not sure if I should add "firebase-storage.js" or if thats handled by the fireflutter package)

<!-- Firebase configuration -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>

<script>
const firebaseConfig = {
  apiKey: "[my-apiKey]",
  authDomain: "[my-authdomain].firebaseapp.com",
  databaseURL: "https://[my-databaseUrl].firebaseio.com",
  projectId: "[my-projectId]",
  storageBucket: "[my-projectId].appspot.com",
  messagingSenderId: "[my-senderId]",
  appId: "[my-appleId]",
  measurementId: "[my-measurmentId]"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);


</script>

<script src="main.dart.js" type="application/javascript"></script>

My firebase initialization (in main.dart)

(What I wondered here is do I have to configure that I use flutter web?)

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final Future<FirebaseApp> _initialization = Firebase.initializeApp();

    return FutureBuilder(
        future: _initialization,
        builder: (context, snapshot) {
          // Check for errors
          if (snapshot.hasError) {
            print(snapshot.error.toString());

            return ErrorStuff();
          }
          if (snapshot.connectionState == ConnectionState.done) {
            return MyApp()
          }
          // Otherwise, show something whilst waiting for initialization to complete
          return CircularProgressIndicator();
        }
    );
  }

My Storage getter (the test)

Future<void> getOverview() async {
    ListResult result = await FirebaseStorage.instance.ref().listAll();
    result.items.forEach((Reference ref) {
      print('Found file: $ref');
    });

    result.prefixes.forEach((Reference ref) {
      print('Found directory: $ref');
    });
    // Reference ref = FirebaseStorage.instance.ref('/bern/calendar.txt');
  }

Thank you for your time and for helping me out 😄

[ditman]

Have you checked the example app of the firebase_storage package? That one I got working on the web! It might be a good jumping off point.

Because of the error in your code, Error: MissingPluginException(No implementation found for method Reference#listAll on channel plugins.flutter.io/firebase_storage), it seems that the override that you have is not fully working.

I have deleted my work branch that you're depending on, so that's the likely culprit for your failure.

The code that I merged to github is not present in pub.dev, so if you want the latest versions of the plugin, try to depend from git for both firebase_storage and firebase_storage_web.