Property 'files' does not exist on type 'EventTarget' error in typescript

问题

I am trying to access the value of the input file from my ionic 2 application but still I'm facing the issue of property files does not exist on type 'EventTarget'. As it is properly working in js but not in typescript. The code is given below:

  document.getElementById("customimage").onchange= function(e?) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

Please help me solve this issue as it is not building my ionic 2 application.

回答1:

The e.target property type depends on the element you are returning on getElementById(...). files is a property of input element: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

In this case, the TypeScript compiler doesn't know you are returning an input element and we dont have an Event class specific for this. So, you can create one like the following code:

interface HTMLInputEvent extends Event {
    target: HTMLInputElement & EventTarget;
}

document.getElementById("customimage").onchange = function(e?: HTMLInputEvent) {
    let files: any = e.target.files[0]; 
    //...
}

回答2:

You can cast it as a HTMLInputElement:

document.getElementById("customimage").onchange= function(e: Event) {
    let file = (<HTMLInputElement>e.target).files[0];
    //rest of your code...
}

回答3:

This is more lines, but I think it's the clearest.

const onChange = (event: Event) => {
  const target= event.target as HTMLInputElement;
  const file: File = (target.files as FileList)[0];
  /** do something with the file **/
};

回答4:

The simplest solution is to declare e as any

e.g

document.getElementById('customimage').onchange = (e: any) => {
    let files = e.target.files[0];
    ...
};

But you lose type information. A safer approach might be to declare your own FileEvent type based on https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload.

回答5:

I have found that:

<input type="file"  accept="image/*" 
(change)="upload($event)">

and

<ion-input type="file"  accept="image/*" 
(change)="upload($event)"><ion-input>  or (ionChange)

does not handle the event in the same way. Therefore event.target consists of different parameters.

I therefore did not use the ion-input tag, but the normal angular <input> tag with the (change)="upload($event)" trigger.

It worked for me on Ionic 4.

来源：https://stackoverflow.com/questions/43176560/property-files-does-not-exist-on-type-eventtarget-error-in-typescript

标签

angular

typescript

ionic2

exif-js