FileReader.onLoad/onLoadEnd event argument has no target.result property

[oriondean]

Trying to retrieve the result of a read file/blob via the event passed into the reader's onload/onloadend method results in a type error (Property 'result' does not exist on type 'EventTarget').

This is valid JavaScript, which is failing type checking because the EventTarget interface does not have a result property.

Examples:

• Typescript playground example - Clicking the run button should show an alert with the file data
• Jsfiddle example

Workaround: Retrieve the result from the reader object (FileReader.result)

[mhegazy]

looks related to #299.

[mhegazy]

PRs welcomed. here is some infromation on contributing lib.d.ts changes: https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes

[JasonGoemaat]

This is used in other cases also such as IndexedDB onsuccess event.

[zhengbli]

Should be covered by microsoft/TypeScript-DOM-lib-generator#207

[victorprocure]

My solution, until this all fixed up, has been just adding a union to the Event callback:

const reader = new FileReader();
reader.onload = (e: Event & { target: { result: string } }) => { ... }

It's gross, but does the trick. The better way would probably be something like this as it is way more complete and abstracts out the types, rather than inlining them.

[LouisWayne]

Instead of using event.target.result, you can just use FileReader.result.

For example,

const fileReader: FileReader = new FileReader();

fileReader.onload = (event: Event) => {
   event.target.result; // This is invalid
   fileReader.result; // This is valid
};

[BernardoMB]

This does not work when running the app in Electron 5.5.1

[anouarcharif]

Hello,

I have the some problem, but only when my angular project is build for production ... what could be the issue ?

[charlesr1971]

I have the same problem after I have done ng build --prod. Something happens during the conversion from 'ts' to 'js'...

[TonnTamerlan]

const fileReader = new FileReader();
fileReader.onload = (event: Event) => {
      this.result; // This works
};

[charlesr1971]

This is how I solved it, in production:

let FileReader: new() => FileReader = ((window as any).FileReader as any).__zone_symbol__OriginalDelegate
let reader = new FileReader();

Based on this StackOverflow post:

https://stackoverflow.com/questions/45542462/angular-4-x-cordova-filereader-fails-silently-white-screen-of-death/45542463?noredirect=1#comment88157606_45542463

[mattiLeBlanc]

How about this:

export interface IDBEventTarget extends EventTarget {
  result: IDBDatabase;
}
export interface IDBEvent extends IDBVersionChangeEvent {
  target: IDBEventTarget;
}

...
request.onupgradeneeded = ( e: IDBEvent ) => {
      this.db = e.target.result;
});

[thesuraj]

const fileReader = new FileReader();
fileReader.onload = (event: Event) => {
      this.result; // This works
};

using this with arrow function will not give the expected result.

const fileReader = new FileReader();
fileReader.onload = function(event: Event) => {
      this.result;              // This works
      fileReader.result;    // Even this works - by @LouisWayne  
};