I’m working on an Angular application with Capacitor, where I use FileReader to read a file and update the UI once the file is loaded. The code works perfectly on web browsers, but when I deploy it as a mobile app using Capacitor, the loadend event of FileReader doesn’t seem to fire at all.
this.crudService.get(endpoint, params).subscribe(
(data) => {
if (data.templateId) {
this.fetchFile(data.templateId).subscribe({
next: (file) => {
let certificateFile: Blob = file;
var reader = new FileReader();
reader.addEventListener('loadend', () => {
this.spinner.hide();
let svgElement = this.populateSVGElement(reader.result, data);
this.ejPreviewDialog.show();
this.preview.nativeElement.innerHTML = '';
this.preview.nativeElement.appendChild(
this.previewText.nativeElement
);
this.preview.nativeElement.appendChild(svgElement);
});
reader.readAsText(certificateFile);
},
error: (_) => {
alert('File not found');
this.spinner.hide();
},
});
} else {
this.spinner.hide();
}
},
(_) => {
console.error('API error occurred');
this.spinner.hide();
}
);
enter code here
What I’ve Tried:
I’ve verified that fetchFile returns a valid Blob object.Checked for any errors or exceptions in the browser console when running on a mobile device, but no relevant errors are logged.
Expected Behavior:
The loadend event should trigger after the file is fully loaded, allowing me to process and display the file content in the UI.