HTMLInputElement type "file" change event.target type (EventTarget) has no files.

[Domvel]

Is there an event type for the HTMLInputElement change event? Currently is automatically resolved as general Event > EventTarget. Which has no files property. see FileList.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Example:

const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.addEventListener('change', (event: Event) => {
  handleFileLoad(event.target.files); // Error: files does not exist on EventTarget.
});
document.body.appendChild(this.fileInput);

tsconfig.json (typescript 3.4.5):

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "sourceMap": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "strict": true
  },
  "exclude": ["node_modules", "dist"]
}

If not, this is a feature request. :) e.g.

[leonelngande]

As per this Stackoverflow answer, you can cast event.target as HTMLInputElement to get around this.

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

[DDeme]

I suggest extending EventTarget for optional property files.

[ZackDeRose]

For those that come behind, I liked this solution:

export type FileEventTarget = EventTarget & { files: FileList };

const fileInputNativeElement =
  fromEvent(fileInputNativeElement, 'change') as Observable<{ target: FileEventTarget }>;

[amatiasq]

I always wondered why Event is not generic.

interface Event<T = EventTarget> {
  target: T;
  // ...
}

So we define the type where we need it.

function myEventListener(event: Event<HTMLInputElement>) {
  console.log(event.target.files);
}

function otherEventListener(event: Event<HTMLAnchorElement>) {
  console.log(event.target.href);
}

This can be made backwards compatible with default generics:

// still works
function myEventListener(event: Event) {}

---

Don't put the type of event :)

---

[infacto]

I'm working with TypeScript ~3.8.3 and HTMLInputElement contains now files (FileList).

const target = event.target as HTMLInputElement;
const files = target.files;

See sources 👍

I'm working with TypeScript ~3.8.3 and HTMLInputElement contains now files (FileList).

const target = event.target as HTMLInputElement;

const files = target.files;

See sources 👍

I was have the same problem and it worked when I quit use the type of element. Thank you for answer me.

[Domvel]

That's correct. It also exists in TypeScript 3.4.5. It also exists in the old version TypeScript 2.0
I don't know what I was thinking back then. ... 🤦‍♂️

I close this issue as fixed. Thanks. The type HTMLInputElement has the property files which is nullable FileList. All fine.

const target = event.target as HTMLInputElement;
const files = target.files;

[amatiasq]

I understood the issue as event.target doesn't have files and that's because it requires casting.
We could take this opportunity to remove the casting step using generics