OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

FileReader loadend event not firing on mobile devices but works on web

  • Thread starter Thread starter Nahom Ersom
  • Start date Start date
N

Nahom Ersom

Guest
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.

Code:
    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.
<p>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.</p>
<pre><code> 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
</code></pre>
<p>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.</p>
<p>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.</p>
Continue reading...
 
Top