Cordova's FileReader takes precedence over TypeScript's FileReader functionality

I encountered an issue when adding the cordova-plugin-file-transfer plugin, where I received the error message:

reader.addEventListener is not a function
.

This problem arises due to Cordova FileReader class overriding typescript FileReader.

How can this be prevented?

Is it possible to import the native FileReader class instead?

Below is the function causing the error:

createImageFromBlob(image: Blob) {
  let reader = new FileReader();
  reader.addEventListener("load", () => {
    this.profilePicture = reader.result;
  }, false);
  if (image) {
    reader.readAsDataURL(image);
  }
}

Answer №1

Instead of struggling with Typescript to utilize FileReader from the DOM, I found a workaround that worked for me.

createImageFromBlob(image: Blob) {
  let reader = new FileReader();

  reader.onloadend = (event) => {
    if(reader.error){
      console.log(reader.error)
    } else {
      this.profilePicture = reader.result;
    }
  }
  reader.readAsDataURL(file)
}

I'm not sure why these modifications were necessary. Everything was functioning correctly until I added the Cordova File plugin, which caused issues to arise.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The number of keys in the related object must correspond to the length of the array in Advanced Generic Types

Can we achieve type safety across rows and columns by having one object define the structure of another? Starting Point: export interface TableColumn { name: string; type: "string" | "number" | "action"; id: string; } ...

Navigating the diverse types of React HTML DOM events within a function concatenation

Question: Is it possible to merge different HTML DOM event types in Typescript? (I am aware of the option to split my function into two separate functions to avoid this error, but I would like to find another solution) Here is an example of my component ...

How to implement an instance method within a Typescript class for a Node.js application

I am encountering an issue with a callback function in my Typescript project. The problem arises when I try to implement the same functionality in a Node project using Typescript. It seems that when referencing 'this' in Node, it no longer points ...

Creating a dynamic multi-series line chart in D3 version 4 that incorporates data points with matching colors to their respective lines

In my attempt to enhance a multi-series line chart with D3 V4 in Angular-cli, I have encountered a challenge. Below is the code snippet of what I have been working on. var lookBookData = z.domain().map(function (name) { return { name: name, ...

Encountering errors while attempting to utilize Ionic plugins within a nxtend/ionic-angular project

I've been trying to integrate nxtend/ionic-angular into my project, but I encountered issues with using plugins. Here are the two use cases where I faced problems: 1st Use Case: I needed to retrieve the current application version, so I installed the ...

When trying to run "ng s -o/ng s/ng build" commands in Angular Cli, there is an issue where no output is displayed

Running "ng serve", "ng serve -o", and "ng build" does not display any output. I am in need of Angular for my project, so if anyone can offer assistance, please help me. https://i.sstatic.net/SmjaL.jpg ...

Exploring ASP.Net Core features: IApplicationBuilder.Map for routing, serving SPA, and managing static

I am exploring the use of Asp.Net Core 2.2 to host my Angular application and handle API requests (on /api). In my Startup.cs file, specifically in the Configure method, I have configured it as follows: app.Map("/home", config => { ...

Angular: Identifier for Dropdown with Multiple Selection

I have recently set up a multi select dropdown with checkboxes by following the instructions provided in this post: https://github.com/NileshPatel17/ng-multiselect-dropdown This is how I implemented it: <div (mouseleave)="showDropDown = false" [class. ...

I am puzzled as to why I keep receiving the error message "Cannot read property 'poPanel' of undefined"

CSS In my project, I am implementing a feature that displays an ordered list by looping through an array of objects and adding them on a button click. It works smoothly for adding items, but when I try to implement a remove function to delete each item, I ...

What is the best way to create TypeScript declarations for both commonjs modules and global variables?

Wanting to make my TypeScript project compatible with both the commonjs module system and globals without modules. I'm considering using webpack for bundling and publishing it into the global namespace, but running into issues with the definitions (.d ...

The Angular/Express application is in search of outdated JavaScript files within the Chrome browser

When updating and deploying my Angular web app on Google App Engine with an Express server, I encounter a peculiar issue. Upon refreshing the browser, I sometimes face a blank page accompanied by the following error: main.f2b54282bab6f51a.js:1 Failed to lo ...

Load all components in advance when implementing lazy loading for individual components in routing

Utilizing standalone components in angular 17 allows for direct lazyLoading of components without the need for modules. However, a question arises on how to preload in this scenario. Previously, when lazy loading modules, the strategy used was withPreloadi ...

Tips for embedding different pages within a single page using Angular 5

My project consists of 4 pages. [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, { path: 'page3', component: Page3Component }, { path: 'page4', component: Page4Co ...

The component prop of Typography in TypeScript does not accept MUI styling

Working with MUI in typescript and attempting to utilize styled from MUI. Encountering an error when passing the component prop to the styled component. The typescript sandbox below displays the issue - any suggestions for a workaround? https://codesandbo ...

Having trouble customizing the toolbar on ngx-quill? Quill seems to be having trouble importing modules

UPDATE: I jumped ship when I discovered that PrimeNg had a quill implementation, and since I was already using PrimeNg, I switched over. Initially had some issues, but upgrading to angular 7 and ngrx 7 beta resolved them. https://www.primefaces.org/primeng ...

What is preventing typescript from inferring these linked types automatically?

Consider the following code snippet: const foo = (flag: boolean) => { if (flag) { return { success: true, data: { name: "John", age: 40 } } } return { success: false, data: null } ...

Analyzing the elements of an array in JavaScript and making modifications to it based on their values

Looking for a Solution Current Data- id price 1001 200 1001 150 1002 300 1003 50 1002 70 1004 30 Desired Outcome id price 1001 350 1002 370 1003 ...

What could be causing issues with my Angular and Express.js Server-Sent Events implementation?

Objective: Implement Server-Sent Events in Angular App with Express Backend Issue: Client does not receive Server-Sent Events Backend Implementation router.get('/options/:a/:b/:c', async (req, res) => { console.log('options endpoint c ...

HashId plugin for Angular

Currently, I'm attempting to integrate into my Angular project built on the latest version. After discovering this definition file: // Type definitions for Hashids.js 1.x // Project: https://github.com/ivanakimov/hashids.node.js // Definitions by: ...

Examining interconnected services' dependencies

Looking to test out AService, which has dependencies on BService and CService. The dependency chain looks like this: AService --> BService --> CService The constructor for AService is as follows: constructor( private bService: BService ) {} The ...