Question 216829 in Firebase Question posted in
An extensive official documentation can be found here.

Object progressevent error in flutter web app with firebase backend

I have developed a Flutter app with Firebase backend, where one can create an account and upload images.
In the Android app I don’t have errors displaying previously uploaded images.
But in the web version of the app the uploaded images are not visible and instead of each image this message is displayed:

"object ProgressEvent"

Here’s the error:
I tried changing the rules in Firebase but didn’t help.

Changing the Firebase rules, opening Chrome with incognito mode, trying other browsers.

Tags:

2

Answers


  1. 0

    Solution:
    at index.html in your project
    change renderer from CanvasKit to html

     <script>
    window.addEventListener('load', function (ev) {
      // var loading = document.querySelector('#loading');
      // loading.textContent = "Loading entrypoint...";
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: async function (engineInitializer) {
          let appRunner = await engineInitializer.initializeEngine({
            hostElement: document.querySelector("#flutter_app"),
            renderer: "html"
          }).then(function (appRunner) {
            return appRunner.runApp();
          });
        }
      })
    });
  </script>

    I was having same error when I was trying to display images from firebase storage. Apparently, firebase storage images has headers.

    This is the error before my fix:

    Response: ImageCodecException: Failed to detect image file format using the file header.
File header was [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20].
Image source: encoded image bytes.response

    I did little research, and what I found is if you are using Canvas Kit as renderer instead of HTML that will cause the problem

    FYI-

    HTML: this renderer uses a combination of HTML, CSS, Canvas 2D, and SVG to render UI. It uses the element to render images.
    CanvasKit: this renderer uses WebGL to render UI, and therefore requires access to the pixels of the image.

    Hope this will help!

    Login or Signup to reply.
  2. 0

    Solo deben agregar en el index.html de la carpeta Web lo siguiente:

    <body>
 <script>
    window.flutterWebRenderer = "html";
  </script>
</body>

    Actualizado (Ya que el otro esta deprecado):
    En el mismo lugar reemplazar en esa parte del codigo:

    onEntrypointLoaded: async function(engineInitializer) {
let appRunner = await engineInitializer.initializeEngine({
renderer: "html"
});
  appRunner.runApp();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search