Ionic 3 FireReader not working but Ionic 4 can

Question

I built my Ionic project on two different computers and got different result.

The first computer: Ionic Info

Ionic:

ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected]) Cordova Platforms : android 7.1.1 Cordova Plugins : no whitelisted plugins (19 plugins total)

System:

NodeJS : v8.11.3 (/usr/bin/node) npm : 6.2.0 OS : Linux 4.15

FileReader only work when I put await in reader.readAsDataURL();

The second computer:

Ionic info

cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

my code:

async downloadFromURL(fileName, mimeType, url){
    return new Promise((resolve,reject) => {
        try{
            var self = this;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType='blob';  
            xhr.onloadend = async function(e) {
                if (xhr.status == 200)
                {
                    var reader = new FileReader();
                    reader.onloadend = async function(event){
                        var response = self.insertFile({
                            'type': mimeType,
                            'title': fileName
                        }, event.target["result"].split(',')[1]);
                        resolve(response);
                    }
                    await reader.readAsDataURL(xhr.response);
                }
            };
            xhr.send();
        } catch (error) {
            reject();
            console.log("error", error);
        }
    });
}

So, my question is how can I fix this without update ionic and cordova?

And sorry for my bad english :D

Thanks in advance.

Sam Sam · Accepted Answer · 2019-03-29T10:34:37

in your index.html try moving the script tag for cordova.js from the header to the body, below the build/polyfills.js script tag. My body tag now looks like this:

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>

Apparently this is a known issue with zones.js, according to this post.

Ionic 3 FireReader not working but Ionic 4 can

1 Answers