Sometimes the FileReader does not response

Ionic Framework ionic-v3
1

Is there a known issue of the FileReader in Ionic? In my case the FileReader is sometimes not responding.

let obj = { hello: 'world' };
let json = JSON.stringify(obj, null, 2);
let blob = new Blob([json], { type: 'application/json' });

let readBlob = function (data) {

  let reader = new FileReader();

  reader.onload = () => {
    console.log('Loaded: ', reader.result);
  };

  reader.onerror = error => {
    console.log('Error: ', error);
  };

  reader.onabort = () => {
    console.log('Aborted');
  };

  reader.readAsText(data);

};

readBlob(blob);

I wrapped the code in try-catch and print every single step. Sometimes there is no reaction of the FileReader. No event is fired. No errors.

Device: Android (5.1)

Ionic:

   ionic (Ionic CLI)  : 4.0.6
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.3
   npm               : 5.6.0
   OS                : Windows 10

Update: I’ll log onloadstart, onloadend and onprogress. Maybe this events are triggered. …

4 Likes
2

Update: This issue is still present. I have no idea what’s the problem is. I want to read a Blob (Text 500kb) and the FileReader does not response. No event no error.
On browser (not ionic) it works fine. Maybe there is a ionic / cordova issue?

3

Solved. It’s a zone.js issue. To fix it, edit the index.html and move the cordova,js (from head) after polyfills.js (body) like

<script src="build/polyfills.js"></script>
<script src="cordova.js"></script>
<script src="build/vendor.js"></script>
<script src="build/main.js"></script>

Cordova must included AFTER Polyfills

11 Likes
4

Same problem here. And yes - moving cordova.js AFTER polyfills.js seems to work. Is this supported officially or could that produce other side effects?

5

Hi @Dovel, I’m new on Ionic 4 and I can’t find those files on my index.html. Do I need to include them manually?
Thanks

6

@rafacazu Hi, we have not yet upgraded to Ionic 4 for several reasons. (native plugins, etc.) Do you mean that this bug is still present in Ionic 4? Sure? Because they changed a lot of the project and compiled structure.

Anyway, I see the scripts like cordova.js and polyfills.js are added on compilation. Just open the compiled index.html and you have access to the script-tags in the body. You could create a post-build script to do this automatically.

I’m not sure if this still working in Ionic 4.
You could also search for “file reader”, “zone.js”, “callbacks not responding” or something like that. (in a search engine you prefer) or search for Ionic script order in index.html.

1 Like
7

it works. thanks buddy.

8

It works…,Thank you very much @Dovel

9

It works. Thank you very much!

10

Worked for me as well, thank you.

Has anyone noticed any other impacts of this change/fix?
It seems to me like a change that might cause some unexpected issues.

11

This is still an issue for ionic 6. cordova and polyfill are not mentioned in any index.html.

They are loaded using vendor script.

12

@rjayaswal did u find solution for it ? I’m still facing the same problem.

13

@rjayaswal @vasanthb @Dovel
did u find any solution fot this issue?

these r the script tags in index.html after compilation and im using capacitor

14

Unfortunately I did not find any solution … that issue is still open.

2 Likes
15

Yes

Just found out my app freezes on IPAD

Any one have similar issues?