Angular Property does not exist on type 'Window'

Question

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 'FileReader' does not exist on type 'Window'. Property 'result' does not exist on type 'EventTarget'.

MY Component

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { UploadService } from './upload.service';
import 'jquery-ui-bundle';


@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  categories: any;

  constructor( private uploadService: UploadService) { }

  ngOnInit() {
    $(document).ready(function() {
      document.getElementById('pro-image').addEventListener('change', readImage, false);

      $( ".preview-images-zone" ).sortable();

      $(document).on('click', '.image-cancel', function() {
          let no = $(this).data('no');
          $(".preview-image.preview-show-"+no).remove();
      });
  });

  var num = 1;
  function readImage(event) {
      if (window.File && window.FileList && window.FileReader) {
          var files = event.target.files; //FileList object
          var output = $(".preview-images-zone");

          for (let i = 0; i < files.length; i++) {
              var file = files[i];
              if (!file.type.match('image')) continue;

              var picReader = new FileReader();

              picReader.addEventListener('load', function (event) {
                  var picFile = event.target;
                  var html =  '<div class="preview-image preview-show-' + num + '">' +
                              '<div class="image-cancel" data-no="' + num + '">x</div>' +
                              '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' + '</div>';

                  $(".preview-image.preview-show-" + num).remove();
                  output.prepend(html);
                  num = num + 1;
              });

              picReader.readAsDataURL(file);
          }
          $("#pro-image").val('');
      } else {
          console.log('Browser not support');
      }
  }
  }
}

Read more about angular way for file-upload: import { DOCUMENT } from '@angular/common'; and constructor( @Inject(DOCUMENT) private document: Document, ) { } — Dmitriy Ivanko, Oct 21 '19 at 16:26
Why do you even want to use jQuery with angular and not the methods given to you by the framework? — Fussel, Oct 21 '19 at 16:41

Shashi · Accepted Answer · 2019-10-21T17:57:41.420

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) {
    const file: File = $event.target.files[0];
    const myReader: FileReader = new FileReader();

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

    myReader.readAsDataURL(file);
  }

I used it and it worked, content when selecting the image it gets bigger than it should, why is it? I tried to implement your code in the component, but I also had problems implementing — , Oct 27 '19 at 14:15

C.OG · Answer 2 · 2019-10-21T17:53:12.017

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 ((window as any).File && (window as any).FileList && (window as any).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;

Resolved the window part, but I still have this problem Property 'result' does not exist on type 'EventTarget'. — , Oct 21 '19 at 17:50

Angular Property does not exist on type 'Window'

2 Answers2

Linked