FileReader API not firing

Description of the problem: In my project I’m trying to read and convert a Blob downloaded from the dropbox api to a text string. When building my project using Cordova, the FileReader fires onload and onprogress events. When building using Capacitor, filereader does not fire any events at all.

Affected platform

• Android
• [x ] iOS
• electron
• web

OS of the development machine

• Windows
• [ x] macOS
• linux

Other information: As suggested in other bug reports, I tried wrapping the FileReader in

platform.ready().then(_ => {
/// perform file reading 
})

and in

zone.run(() => {
/// perform file reading
})

None helped. Cordova has no issues reading the file.

When I use

var text = await (new Response(response.fileBlob)).text();

to read the file blob, it does work.

Capacitor version: 1.0.0-beta.24

[tripodsgames]

You can try this.

export function getFileReader(): FileReader {
    const fileReader = new FileReader();
    const zoneOriginalInstance = (fileReader as any)["__zone_symbol__originalInstance"];
    return zoneOriginalInstance || fileReader;
}
...
let newInstance = getFileReader();

[moridianmess]

If you have plugins that rely on FileReader working correctly, using snippets from the getFileReader() code mentioned above, I have a solution

Add to app.module.ts:

export class FileReaderA extends window.FileReader {
	constructor() {
		super();
		const zoneOriginalInstance = (this as any)['__zone_symbol__originalInstance'];
		return zoneOriginalInstance || this;
	}
}

window.FileReader = FileReaderA;

or add the above code to another file and import the file, not the class.

This is a hack but it means that when calling new FileReader() all the events work. Ideally it would be nice to be able to control the order in which scripts are imported. As the fix I’ve always used in a cordova based project is to change the order of polyfills.js and cordova.js in the index.html file.