Upon transitioning an Ionic/Angular project from Cordova to Capacitor, I found it necessary to override the default window.FileReader in order to successfully execute the onload() method. Here is the approach I took (https://github.com/ionic-team/capacitor/issues/1564):
constructor(
appRef: ApplicationRef
) {
class IonicFileReader extends window.FileReader {
constructor() {
super();
// Various attempted solutions not achieving desired results
const zoneOriginalInstance = (this as any)[
'__zone_symbol__originalInstance'
];
return zoneOriginalInstance || this;
}
// Various attempted solutions not achieving desired results
}
// Various attempted solutions not achieving desired results
window.FileReader = IonicFileReader;
}
I made the override within the constructor of the AppModule to allow for passing the ApplicationRef and triggering the change detection mechanism. Unfortunately, none of the solutions, except for solution number 4 which was deemed unacceptable, yielded the desired outcome.
Initiating change detection should occur at this point within the function:
function blobToText(blob: any): Observable<string> {
return new Observable<string>((observer: any) => {
if (!blob) {
observer.next("");
observer.complete();
} else {
let reader = new FileReader();
reader.onload = event => {
observer.next((<any>event.target).result);
observer.complete();
// CHANGE DETECTION SHOULD BE FIRED HERE
// Various attempted solutions not achieving desired results
};
reader.readAsText(blob);
}
});
}