Home / Questions / 447255
Accepted
Emy
Asked: 2022-04-27 07:35:42 +0800 CST 2022-04-27 07:35:42 +0800 CST

Error TS2339: Property 'files' does not exist on type 'EventTarget' when sending project to production

  • 772

A greeting and good day to all, I hope you can guide me with my problem. I tell you I have a simple QR reader where I load the QR image and show the result on the screen. It works normally when running the project using the ionic serve command, but when I send it to production with the ionic build --prod command an error is generated that refers to the input:

<input #fileinput type="file" accept="image/*;capture=camera" hidden (change)="handleFile($event.target.files)">

The error generated is the following: error TS2339: Property 'files' does not exist on type 'EventTarget'. I also attach a capture of the error in the cmd:

enter image description here

So I have the code of tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      DEMO LECTOR FILE QR
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-content>
    <input #fileinput type="file" accept="image/*;capture=camera" hidden (change)="handleFile($event.target.files)">
    <ion-button expand="full" (click)="captureImage()">
      <ion-icon slot="start" name="camera"></ion-icon>
      Capturar Imagen
    </ion-button>
    <canvas #canvas hidden></canvas>
    <ion-card *ngIf="scanResult">
      <ion-card-header>
        <ion-card-title>QR Code</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        {{ scanResult }}
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-content>

And so I have the code of tab1.page.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import jsQR from 'jsqr';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  @ViewChild('video', { static: false }) video: ElementRef;
  @ViewChild('canvas', { static: false }) canvas: ElementRef;
  @ViewChild('fileinput', { static: false }) fileinput: ElementRef;

  canvasElement: any;
  canvasContext: any;
  scanResult = null;

  constructor() {}

  ngAfterViewInit() {
    this.canvasElement = this.canvas.nativeElement;
    this.canvasContext = this.canvasElement.getContext('2d');
  }

  captureImage() {
    this.fileinput.nativeElement.click();
  }

  handleFile(files: FileList) {
    const file = files.item(0);
    var img = new Image();
    img.onload = () => {
      this.canvasContext.drawImage(img, 0, 0, this.canvasElement.width, this.canvasElement.height);
      const imageData = this.canvasContext.getImageData(
        0,
        0,
        this.canvasElement.width,
        this.canvasElement.height
      );
      const code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: 'dontInvert'
      });

      if (code) {
        this.scanResult = code.data;
      }
    };
    img.src = URL.createObjectURL(file);
  }
}

I have version of angular 11.2.11 and ionic 5.6.5

angular

2 Answers

  1. Best Answer

    Try handling the Files in the function

    in the HTML

    (change)="handleFile($event)

    in the typescript

    handleFile(event): void {
   try {
   const files = event.target.files;
   ...
   } catch {}
}
    • 1

  2. good day. You say it works for you in development but not in production.

    Apparently the variable $event.target. files is filled at runtime and at the time the view(html) is loaded it doesn't exist yet. Verify this by declaring that the value of the variable(s) can be null, that way when the value is null, the variable(s) simply won't be called. Here I leave an example of how to add "?" to the variable a possible null is validated

    (change)="handleFile($event.target.files)" // original
(change)="handleFile($event.target.files?)" // agregando validación de posible null a files
(change)="handleFile($event.target?.files)" // agregando validación de posible null a target

    Check which one works for you. If a null validation is necessary in sequence, opt for:

    (change)="handleFile($event.target?.files?)" // agregando validación de posible null a target y files secuencialmente
    • 0