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: './uploadponent.html',
  styleUrls: ['./uploadponent.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');
      }
  }
  }
}

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.ponent.html',
  styleUrls: ['./upload.ponent.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');
      }
  }
  }
}

• javascript
• angular
• typescript

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

2 Answers 2

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 ponent you can do this in html. This is the better way of doing this. Try to avoid jQuery as much as possible in the ponent to make the code look cleaner.

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

in ponent

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);
  }

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) { //...

Bees:

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

I wrote an article on this here. This is typescript plaining 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;

bees:

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