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

Question

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.

Solution 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]; 
    //...
}

Solution 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...
}

Update:

You can also use this:

let file = (e.target as HTMLInputElement).files[0];

Solution 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 **/
    };

2022 update: Some people have rightly pointed out that the two casts on the second line are unnecessary, this is totally correct and I've revised my answer.

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

Solution 4

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

I would change Event to ChangeEvent, however the rest of Devin Clark's answer is great :)

Solution 5

// use - ChangeEvent<HTMLInputElement>

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

View more solutions

Comments

[Tomer]

As someone suggested below you may just use: "e: any". I was wondering what are the pros for using the approach offered here?

[RenanSS]

this solved for me. I would accept it as the correct answer.

[Flavien Volken]

@Tomer, it's more likely because there is no pros of loosing the type of typescript. Each time you are using "any" you remove the types guards.

[Ali Sajid]

you're writting it in ts?

[soroush gholamzadeh]

@AliSajid Yes, check this out: blogs.microsoft.co.il/gilf/2013/01/18/…

[Lucas Leblanc]

Exactly right. In a nutshell, if you use "any" here, you may as well not use TypeScript at all. That's a bit hyperbolic -- I've been known to use "any" when I'm not in the mood to define a type just for a single function's parameter -- but the logic is consistent; the only reason to use TypeScript at all is to allow the compiler to assist you by preventing you from making type-based mistakes.

[Konrad Viltersten]

What type would you suggest for the reader.onloadend = ($event: ProgressEvent) => { ... } when I try to access $event.target? The target is of a type that has a property called result but my TsLint complains about the property not being there (due to the type not properly set by me, of course).

[Konrad Viltersten]

I mean like in this sample. What is the type of e.target and e.target.result?

[Konrad Viltersten]

I like the suggested approach but I'm not sure regarding the purpose of & EventTarget part. I understand that target: HTMLInputElement adds a property to the extended type Event that's called target and is of type HTMLInputElement. But what do we gain by saying "oh, right, it can also be of another type too...". What am I missing here?

[Javi Marzán]

You dont need to cast the files. When you cast the HTMLInputElement, it automatically inferes the target.files type. Plus, it's dangerous to go around casting everything. The lesser you cast, the better.

[Nicolas]

I surfed at least half of the internet to find this solution. It is quite difficult to explain to other developers why strong typing is necessary in computing. Thank you a lot @Devin Clark

[Solijon Sharipov]

I think this answer should be accepted. At least it worked for me.

[lissettdm]

Please provide an explanation about your answer, stackoverflow.com/help/how-to-answer

[xierch]

Events are propagating, target could be other elements in different type. Better to use e.currentTarget, which IS a HTMLInputElement.