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

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.

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

I suggest extending EventTarget for optional property files.

For those that come behind, I liked this solution:

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

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

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

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 👍

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;

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

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?

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));

Just

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

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

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

Kirill (@stevenKirill)

Kirill (@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.

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]

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

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);

  }

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

Shantanu Sharma (@umbrashia)

Shantanu Sharma (@umbrashia) and A. Matías Quezada (@amatiasq) suggestion should be implemented natively in ts

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

I ended up having to do this:

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

🤪

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

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

Navigation Menu

Repository navigation

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

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

leonelngande commented on Jan 9, 2020

DDeme commented on Jan 20, 2020

ZackDeRose commented on Mar 1, 2020

amatiasq commented on Jun 1, 2020

infacto commented on Jun 18, 2020

Domvel commented on Jun 19, 2020

amatiasq commented on Jun 19, 2020

Domvel commented on Jun 19, 2020

1 remaining item

phfoxer commented on Sep 7, 2020

egorovsa commented on Mar 12, 2021

egorovsa commented on Nov 7, 2021

stevenKirill commented on Nov 7, 2021

Dassderdie commented on Nov 7, 2021

hejuhenryk commented on Dec 3, 2021

ritikbanger commented on Feb 8, 2022

umbrashia commented on Nov 17, 2022

AntonyStone1 commented on Dec 25, 2022

guiled commented on Feb 12, 2023

rcollette commented on Feb 13, 2023

vincerubinetti commented on Jun 2, 2023

KraXen72 commented on Aug 11, 2023

cassepipe commented on Aug 14, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions