Angular Property Does Not Exist On Type 'window'

I have a function to upload, but I have the following errors: Property 'File' does not exist on type 'Window'. Property 'FileList' does not exist on type 'Window'. Property 'FileRe

Solution 1:

Since File is not an existing property of window. You will need to cast window as any or use object['property'] notation

if ((window as any).File && (window as any).FileList && (window as any).FileReader) or if (window['File'] && window['FileList'] && window['FileReader']

instead of attaching change listener in component you can do this in html. This is the better way of doing this. Try to avoid jQuery as much as possible in the component to make the code look cleaner.

<input type="file" (change)="fileChangeListener($event)">

in component

fileChangeListener($event) {
    constfile: File = $event.target.files[0];
    constmyReader: FileReader = newFileReader();

    myReader.onloadend = (event: any) => {
      this.image = event.target.result;
    };

    myReader.readAsDataURL(file);
  }

Solution 2:

Seeing that you use the any type. You can wrap your calls to cast the window type as any.

This:

if (window.File && window.FileList && window.FileReader) { //...

Becomes:

if ((windowasany).File && (windowasany).FileList && (windowasany).FileReader) { //...

I wrote an article on this here. This is typescript complaining that you're trying to access a property on the window that typescript doesn't know about. This article explains the best way to handle it while remaining type safe.

You can leverage the same fix for the result.

this:

picReader.addEventListener('load', function (event) {
                  var picFile = event.target;

becomes:

picReader.addEventListener('load', function (event) {
                  var picFile = event.target as any;