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

[ghost]

---

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 👍

[ghost]

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

[Domvel]

const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.addEventListener('change', event => {
  console.log(event.target.files);
});

This is acual resolved by the TypeScript in VS Code. (just hover the method to see it.)

HTMLInputElement.addEventListener<"change">(
  type: "change", 
  listener: (this: HTMLInputElement, ev: Event) => any, 
  options?: boolean | AddEventListenerOptions
): void

Means that the HTMLInputElement is detected and maybe available for a generic event type. 🤔
Is there already a generic Event type? But anyway it is not resolved in this generic type.
It's a good idea. If TypeScript detects the context of the event listener - in this case - why not?
But note that in my initial post, I use the fixed type Event for the event variable.

So the Event type of a addEventListener should detect the target type (generic) if possible.
Any examples or ideas? Any expertise of a member or constributor?

[stof]

the issue with making target generic here is related to bubbling events. Adding a listener somewhere will generally not guarantee you the type of target as it can actually be dispatched on a child node. For instance, clicking on a button might actually click on an icon inside that button instead.

[phfoxer]

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

 let files:FileList = (<FileList>(<HTMLInputElement>e.target).files);
console.log(files.item(0));

[egorovsa]

Just

function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    console.log(event.target.files);
}

[egorovsa]

How can I tell typescript that I exactly will get a file in this example? Does anybody know?

const upload = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const target = e.currentTarget as HTMLInputElement;
    const file = target.files[0];
    console.log(file)
};

Is says on this line const file = target.files[0] that object is possibly null

Just check it through: "?"
const file = target.files?.[0];
however pay attention that the type will be File | undefined

[stevenKirill]

How can I tell typescript that I exactly will get a file in this example? Does anybody know?

const upload = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const target = e.currentTarget as HTMLInputElement;
    const file = target.files[0];
    console.log(file)
};

Is says on this line const file = target.files[0] that object is possibly null

[Dassderdie]

@stevenKirill
You could use the non-null-assertion-operator-postfix, like this const file = target.files![0]; if you are completely sure that files is defined.

[hejuhenryk]

How can I tell typescript that I exactly will get a file in this example? Does anybody know?

const upload = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const target = e.currentTarget as HTMLInputElement;
    const file = target.files[0];
    console.log(file)
};

Is says on this line const file = target.files[0] that object is possibly null

then check if it is not
if (e.target.files && e.target.files.length > 0) { const file = e.target.files[0]

[ritikbanger]

React.ChangeEvent<HTMLInputElement> this doesn't work in case of filelist. It gives the error: Type 'FileList' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators

[umbrashia]

use "Types" for solution of that problem
export type TGenericEvent<T> = Event & { target: T };

use like this

eventCall(evt?: TGenericEvent<HTMLInputElement>): void {

    console.log("event",evt?.target.value);

  }

[AntonyStone1]

  const onFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedFile(event.target.files[0]);
  }

[guiled]

@umbrashia and @amatiasq suggestion should be implemented natively in ts

[rcollette]

Casting isn't helpful for unit tests. Having the Event type be a generic would be more useful.

[vincerubinetti]

I ended up having to do this:

type FileEvent = ChangeEvent<HTMLInputElement> & {
  target: EventTarget & { files: FileList };
};

🤪

[KraXen72]

after many iterations, this is what worked for me:

async function upload(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
	if (!e.currentTarget || !e.currentTarget.files) return;
	const file = e.currentTarget.files[0];
	//...
}

i'm on typescript@^5.1.6, using svelte's on:change={upload} but unsure if that's relevant

[cassepipe]

It's kind sad to have to track down what the DOM events types are over there : https://github.com/microsoft/TypeScript-DOM-lib-generator/blob/f85d145348fc853bc7fecea5e5925c66a2e0e0b6/inputfiles/addedTypes.jsonc#L193

Only to find out that the event you need does not exist in some github issue