title: Image is not being upload to Firebase Storage from Flutter Web
body: <p>I tried to do this but this is showing me this exception in the console. This is the error im facing</p>
  <pre><code>TypeError: appImpl.storage is not a function
      at Object.getStorageInstance (http://localhost:63570/packages/firebase_storage_web/src/interop/storage.dart.lib.js:802:65)
      at firebase_storage_web.FirebaseStorageWeb.new.get delegate [as delegate] (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:213:56)
      at new reference_web.ReferenceWeb.new (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:159:28)
      at firebase_storage_web.FirebaseStorageWeb.new.[_createReference] (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:243:14)
      at http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:238:19
      at Object.guardWebExceptions (http://localhost:63570/packages/firebase_core/src/internals.dart.lib.js:79:19)
      at Object.guard (http://localhost:63570/packages/firebase_storage_web/src/utils/errors.dart.lib.js:23:22)
      at firebase_storage_web.FirebaseStorageWeb.new.ref (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:235:21)
      at firebase_storage.FirebaseStorage.__.ref (http://localhost:63570/packages/firebase_storage/firebase_storage.dart.lib.js:130:71)
      at categories_content._categoriesState.new.uploadImageToFirebase (http://localhost:63570/packages/responsive_admin_dashboard/screens/components/categories_content.dart.lib.js:290:61)
      at uploadImageToFirebase.next (&lt;anonymous&gt;)
      at runBody (http://localhost:63570/dart_sdk.js:40646:34)
      at Object._async [as async] (http://localhost:63570/dart_sdk.js:40677:7)
      at categories_content._categoriesState.new.uploadImageToFirebase (http://localhost:63570/packages/responsive_admin_dashboard/screens/components/categories_content.dart.lib.js:289:20)
      at http://localhost:63570/packages/responsive_admin_dashboard/screens/components/categories_content.dart.lib.js:311:36
      at ink_well._InkResponseState.new.[_handleTap] (http://localhost:63570/packages/flutter/src/material/icon_button.dart.lib.js:41358:31)
      at tap.TapGestureRecognizer.new.invokeCallback (http://localhost:63570/packages/flutter/src/gestures/recognizer.dart.lib.js:190:18)
      at tap.TapGestureRecognizer.new.handleTapUp (http://localhost:63570/packages/flutter/src/gestures/tap.dart.lib.js:411:40)
      at tap.TapGestureRecognizer.new.[_checkUp] (http://localhost:63570/packages/flutter/src/gestures/tap.dart.lib.js:217:12)
      at tap.TapGestureRecognizer.new.handlePrimaryPointer (http://localhost:63570/packages/flutter/src/gestures/tap.dart.lib.js:166:23)
      at tap.TapGestureRecognizer.new.handleEvent (http://localhost:63570/packages/flutter/src/gestures/recognizer.dart.lib.js:426:16)
      at pointer_router.PointerRouter.new.[_dispatch] (http://localhost:63570/packages/flutter/src/gestures/pointer_router.dart.lib.js:86:9)
      at http://localhost:63570/packages/flutter/src/gestures/pointer_router.dart.lib.js:112:26
      at LinkedMap.new.forEach (http://localhost:63570/dart_sdk.js:27731:11)
      at pointer_router.PointerRouter.new.[_dispatchEventToRoutes] (http://localhost:63570/packages/flutter/src/gestures/pointer_router.dart.lib.js:110:29)
      at pointer_router.PointerRouter.new.route (http://localhost:63570/packages/flutter/src/gestures/pointer_router.dart.lib.js:105:37)
      at binding$5.WidgetsFlutterBinding.new.handleEvent (http://localhost:63570/packages/flutter/src/gestures/binding.dart.lib.js:367:26)
      at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:63570/packages/flutter/src/gestures/binding.dart.lib.js:355:24)
      at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:63570/packages/flutter/src/rendering/layer.dart.lib.js:5431:13)
      at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (http://localhost:63570/packages/flutter/src/gestures/binding.dart.lib.js:331:14)
      at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (http://localhost:63570/packages/flutter/src/gestures/binding.dart.lib.js:305:43)
      at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (http://localhost:63570/packages/flutter/src/gestures/binding.dart.lib.js:295:14)
      at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (http://localhost:63570/packages/flutter/src/gestures/binding.dart.lib.js:286:54)
      at Object.invoke1 (http://localhost:63570/dart_sdk.js:190931:7)
      at _engine.EnginePlatformDispatcher.__.invokeOnPointerDataPacket (http://localhost:63570/dart_sdk.js:171547:15)
      at _engine.PointerBinding.__.[_onPointerData] (http://localhost:63570/dart_sdk.js:172463:49)
      at http://localhost:63570/dart_sdk.js:172901:28
      at http://localhost:63570/dart_sdk.js:172857:16
      at loggedHandler (http://localhost:63570/dart_sdk.js:172562:11)
  TypeError: appImpl.storage is not a function
      at Object.getStorageInstance (http://localhost:63570/packages/firebase_storage_web/src/interop/storage.dart.lib.js:802:65)
      at firebase_storage_web.FirebaseStorageWeb.new.get delegate [as delegate] (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:213:56)
      at new reference_web.ReferenceWeb.new (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:159:28)
      at firebase_storage_web.FirebaseStorageWeb.new.[_createReference] (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:243:14)
      at http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:238:19
      at Object.guardWebExceptions (http://localhost:63570/packages/firebase_core/src/internals.dart.lib.js:79:19)
      at Object.guard (http://localhost:63570/packages/firebase_storage_web/src/utils/errors.dart.lib.js:23:22)
      at firebase_storage_web.FirebaseStorageWeb.new.ref (http://localhost:63570/packages/firebase_storage_web/src/reference_web.dart.lib.js:235:21)
      at firebase_storage.FirebaseStorage.__.ref (http://localhost:63570/packages/firebase_storage/firebase_storage.dart.lib.js:130:71)
      at categories_content._categoriesState.new.uploadImageToFirebase (http://localhost:63570/packages/responsive_admin_dashboard/screens/components/categories_content.dart.lib.js:290:61)
      at uploadImageToFirebase.next (&lt;anonymous&gt;)
      at runBody (http://localhost:63570/dart_sdk.js:40646:34)
      at Object._async [as async] (http://localhost:63570/dart_sdk.js:40677:7)
      at categories_content._categoriesState.new.uploadImageToFirebase (http://localhost:63570/packages/responsive_admin_dashboard/screens/components/categories_content.dart.lib.js:289:20)
      at http://localhost:63570/packages/responsive_admin_dashboard/screens/components/categories_content.dart.lib.js:311:36
      at ink_well._InkResponseState.new.[_handleTap] (http://localhost:63570/packages/flutter/src/material/icon_button.dart.lib.js:41358:31)
      at tap.TapGestureRecognizer.new.invokeCallback (http://localhost:63570/packages/flutter/src/gestures/recognizer.dart.lib.js:190:18)
      at tap.TapGestureRecognizer.new.handleTapUp (http://localhost:63570/packages/flutter/src/gestures/tap.dart.lib.js:411:40)
      at tap.TapGestureRecognizer.new.[_checkUp] (http://localhost:63570/packages/flutter/src/gestures/tap.dart.lib.js:217:12)
      at tap.TapGestureRecognizer.new.handlePrimaryPointer (http://localhost:63570/packages/flutter/src/gestures/tap.dart.lib.js:166:23)
      at tap.TapGestureRecognizer.new.handleEvent 
  </code></pre>
  <p>Here's my code of .dart file where i wrote the code for uploading the image</p>
  <pre><code>import 'package:file_picker/file_picker.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:responsive_admin_dashboard/constants/constants.dart';
  import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
  import 'package:responsive_admin_dashboard/constants/responsive.dart';
  import 'package:responsive_admin_dashboard/screens/components/analytic_cards.dart';
  import 'package:responsive_admin_dashboard/screens/components/custom_appbar.dart';
  import 'package:responsive_admin_dashboard/screens/components/top_referals.dart';
  import 'package:responsive_admin_dashboard/screens/components/users.dart';
  import 'package:responsive_admin_dashboard/screens/components/users_by_device.dart';
  import 'package:responsive_admin_dashboard/screens/components/viewers.dart';
  
  import 'discussions.dart';
  
  class CategoriesContent extends StatefulWidget {
    CategoriesContent({Key? key}) : super(key: key);
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; _categoriesState();
  }
  
  class _categoriesState extends State&lt;CategoriesContent&gt; {
    final GlobalKey _formKey = GlobalKey&lt;FormState&gt;();
    final TextEditingController _catName = TextEditingController();
    dynamic image;
    String fileName = &quot;&quot;;
  
    pickImage() async {
      FilePickerResult? result = await FilePicker.platform.pickFiles(
        type: FileType.image,
        allowMultiple: false,
      );
  
      if (result != null) {
        setState(() {
          image = result.files.first.bytes;
          fileName = result.files.first.name;
        });
      } else {
        print(&quot;No image selected&quot;);
      }
    }
  
    uploadImageToFirebase() async {
      firebase_storage.Reference ref = firebase_storage.FirebaseStorage.instance
          .ref('gs://sachthemotive-9c1ae.appspot.com/$fileName');
      try {
        await ref.putData(image);
      } on firebase_storage.FirebaseException catch (e) {
        print(e);
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(appPadding),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                Text(&quot;Add Category&quot;),
                Padding(
                  padding: const EdgeInsets.all(30.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        width: 200,
                        height: 200,
                        decoration: BoxDecoration(
                          color: Colors.grey,
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(color: Colors.red, width: 2),
                        ),
                        child: InkWell(
                          onTap: () {
                            pickImage();
                          },
                          child: image == null
                              ? Center(
                                  child: Icon(Icons.arrow_upward_rounded),
                                )
                              : Image.memory(
                                  image,
                                  fit: BoxFit.cover,
                                ),
                        ),
                      ),
                      SizedBox(
                        width: 40.0,
                      ),
                      Column(
                        children: [
                          Container(
                            width: 200,
                            child: TextFormField(
                              controller: _catName,
                              validator: (value) {
                                if (value!.isEmpty) {
                                  return &quot;Enter Category Name&quot;;
                                }
                                return null;
                              },
                              decoration: InputDecoration(
                                  labelText: &quot;Enter Category&quot;,
                                  contentPadding: EdgeInsets.zero),
                            ),
                          ),
                          SizedBox(
                            height: 30,
                          ),
                          TextButton(
                            onPressed: () {
                              uploadImageToFirebase();
                            },
                            child: Text(&quot;Upload&quot;),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Here's the Pubspec.yaml where I added some dependencies.</p>
  <pre><code>name: responsive_admin_dashboard
  description: A new Flutter project.
  
  # The following line prevents the package from being accidentally published to
  # pub.dev using `pub publish`. This is preferred for private packages.
  publish_to: 'none' # Remove this line if you wish to publish to pub.dev
  
  # The following defines the version and build number for your application.
  # A version number is three numbers separated by dots, like 1.2.43
  # followed by an optional build number separated by a +.
  # Both the version and the builder number may be overridden in flutter
  # build by specifying --build-name and --build-number, respectively.
  # In Android, build-name is used as versionName while build-number used as versionCode.
  # Read more about Android versioning at https://developer.android.com/studio/publish/versioning
  # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
  # Read more about iOS versioning at
  # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
  version: 1.0.0+1
  
  environment:
    sdk: &quot;&gt;=2.12.0 &lt;3.0.0&quot;
  
  dependencies:
    flutter:
      sdk: flutter
  
  
    # The following adds the Cupertino Icons font to your application.
    # Use with the CupertinoIcons class for iOS style icons.
    cupertino_icons: ^1.0.2
    flutter_svg: ^0.22.0
    fl_chart: ^0.36.1
    provider: ^5.0.0
    flutter_dropzone: ^3.0.5
    file_picker: ^4.5.1
    firebase_storage: ^10.2.10
    firebase_core: ^1.14.0
    firebase_auth: ^3.3.12
    cloud_firestore: ^3.1.11
  
  dev_dependencies:
    flutter_test:
      sdk: flutter
  
  # For information on the generic Dart part of this file, see the
  # following page: https://dart.dev/tools/pub/pubspec
  
  # The following section is specific to Flutter.
  flutter:
  
    # The following line ensures that the Material Icons font is
    # included with your application, so that you can use the icons in
    # the material Icons class.
    uses-material-design: true
  
    # To add assets to your application, add an assets section, like this:
    # assets:
    #   - images/a_dot_burr.jpeg
    #   - images/a_dot_ham.jpeg
    assets:
      - assets/images/
      - assets/icons/
  
    # An image asset can refer to one or more resolution-specific &quot;variants&quot;, see
    # https://flutter.dev/assets-and-images/#resolution-aware.
  
    # For details regarding adding assets from package dependencies, see
    # https://flutter.dev/assets-and-images/#from-packages
  
    # To add custom fonts to your application, add a fonts section here,
    # in this &quot;flutter&quot; section. Each entry in this list should have a
    # &quot;family&quot; key with the font family name, and a &quot;fonts&quot; key with a
    # list giving the asset and other descriptors for the font. For
    # example:
    # fonts:
    #   - family: Schyler
    #     fonts:
    #       - asset: fonts/Schyler-Regular.ttf
    #       - asset: fonts/Schyler-Italic.ttf
    #         style: italic
    #   - family: Trajan Pro
    #     fonts:
    #       - asset: fonts/TrajanPro.ttf
    #       - asset: fonts/TrajanPro_Bold.ttf
    #         weight: 700
    #
    # For details regarding fonts from package dependencies,
    # see https://flutter.dev/custom-fonts/#from-packages
  </code></pre>
  <p>Here's the Index.html where I added the firebase connection to my Flutter web.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.
  
      The path provided below has to start and end with a slash &quot;/&quot; in order for
      it to work correctly.
  
      For more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    --&gt;
    &lt;base href=&quot;/&quot;&gt;
  
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta content=&quot;IE=Edge&quot; http-equiv=&quot;X-UA-Compatible&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;A new Flutter project.&quot;&gt;
  
    &lt;!-- iOS meta tags &amp; icons --&gt;
    &lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
    &lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot;&gt;
    &lt;meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;responsive_admin_dashboard&quot;&gt;
    &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;icons/Icon-192.png&quot;&gt;
  
    &lt;title&gt;responsive_admin_dashboard&lt;/title&gt;
    &lt;link rel=&quot;manifest&quot; href=&quot;manifest.json&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- This script installs service_worker.js to provide PWA functionality to
         application. For more information, see:
         https://developers.google.com/web/fundamentals/primers/service-workers --&gt;
    &lt;script&gt;
      var serviceWorkerVersion = null;
      var scriptLoaded = false;
      function loadMainDartJs() {
        if (scriptLoaded) {
          return;
        }
        scriptLoaded = true;
        var scriptTag = document.createElement('script');
        scriptTag.src = 'main.dart.js';
        scriptTag.type = 'application/javascript';
        document.body.append(scriptTag);
      }
  
      if ('serviceWorker' in navigator) {
        // Service workers are supported. Use them.
        window.addEventListener('load', function () {
          // Wait for registration to finish before dropping the &lt;script&gt; tag.
          // Otherwise, the browser will load the script multiple times,
          // potentially different versions.
          var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
          navigator.serviceWorker.register(serviceWorkerUrl)
            .then((reg) =&gt; {
              function waitForActivation(serviceWorker) {
                serviceWorker.addEventListener('statechange', () =&gt; {
                  if (serviceWorker.state == 'activated') {
                    console.log('Installed new service worker.');
                    loadMainDartJs();
                  }
                });
              }
              if (!reg.active &amp;&amp; (reg.installing || reg.waiting)) {
                // No active web worker and we have installed or are installing
                // one for the first time. Simply wait for it to activate.
                waitForActivation(reg.installing ?? reg.waiting);
              } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
                // When the app updates the serviceWorkerVersion changes, so we
                // need to ask the service worker to update.
                console.log('New service worker available.');
                reg.update();
                waitForActivation(reg.installing);
              } else {
                // Existing service worker is still good.
                console.log('Loading app from service worker.');
                loadMainDartJs();
              }
            });
  
          // If service worker doesn't succeed in a reasonable amount of time,
          // fallback to plaint &lt;script&gt; tag.
          setTimeout(() =&gt; {
            if (!scriptLoaded) {
              console.warn(
                'Failed to load app from service worker. Falling back to plain &lt;script&gt; tag.',
              );
              loadMainDartJs();
            }
          }, 4000);
        });
      } else {
        // Service workers not supported. Just drop the &lt;script&gt; tag.
        loadMainDartJs();
      }
    &lt;/script&gt;
    &lt;script src=&quot;https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
    var firebaseConfig = {
      apiKey: &quot;AIzaSyBGkjZwgHq4ZCs7DCEkX0xkxEpx9Cpzw7Q&quot;,
      authDomain: &quot;sachthemotive-9c1ae.firebaseapp.com&quot;,
      projectId: &quot;sachthemotive-9c1ae&quot;,
      storageBucket: &quot;sachthemotive-9c1ae.appspot.com&quot;,
      messagingSenderId: &quot;38185614362&quot;,
      appId: &quot;1:38185614362:web:e3af00acc7bef84344a5a3&quot;,
      measurementId: &quot;G-3PKPRQ92SL&quot;
    };
  
    firebase.initializeApp(firebaseConfig);
    var storage = getStorage(firebaseApp);
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>