Cordova reader.onloadend is not fired - ios

Question

I'm making a cross platform app with cordova.
I want to get an image from photo library and preview it on screen and upload it to server.
I could do the image is displayed on screen so far.
The problem is reader.onloadend is not fired and nothing happens.
$scope.getImage = function() {
var options = {
quality: 100,
sourceType: 0 // 0:Photo Library, 1=Camera, 2=Saved Album
};
var onSuccess = function(imageURI) {
var pic = document.getElementById('addImage');
pic.style.display = 'block';
pic.src = imageURI;
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("loaded");
};
reader.onerror = function(error) {
alert("error");
};
reader.readAsArrayBuffer(imageURI);
};
var onFail = function(message) {
alert("error");
};
navigator.camera.getPicture(onSuccess, onFail, options);
};
I've been struggling this problem for 2 days and found exactly same thread phonegap filereader onloadend doesn't work but couldn't solve yet.
Does anyone have any suggestion?
I appreciate any help.

Answer 1

I identified this as an issue with zone.js in Angular 2.
A workaround is to wrap FileReader object into it's own zone.
const WrappedFileReader = window.FileReader
window.FileReader = function OriginalFileReader(...args) {
WrappedFileReader.apply(this, args)
const originalInstance = this[Zone.__symbol__('originalInstance')] // eslint-disable-line
return originalInstance || this
}