Flow: Types and event.target.files

[cdebotton]

Hey everyone,

I'm trying to statically type a change event handler on a file input. My JavaScript looks like this:

const getFileFrom = (element: HTMLInputElement): Promise<File> =>
    new Promise((resolve, reject) => {
        element.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
            resolve(event.target.files[0]);
        });
    });

However I get this, semi cryptic error message:

[flow] call of method addEventListener (Function cannot be called on any member of intersection type intersection Member 1: function type Error: string This type is incompatible with the expected param type of string enum Member 2: function type Error: string This type is incompatible with the expected param type of string enum Member 3: function type Error: string This type is incompatible with the expected param type of string enum Member 4: function type Error: string This type is incompatible with the expected param type of string enum Member 5: function type Error: string Expected string literal wheel, got change instead string literal wheel Member 6: function type Error: string This type is incompatible with the expected param type of string enum Member 7: function type Error: string This type is incompatible with the expected param type of string enum Member 8: function type Error: string This type is incompatible with the expected param type of string enum Member 9: function type Error: function This type is incompatible with union: object type | EventHandler)

Looking through the flow source, I can't seem to find any example of what I'm trying to do. Does anyone else have experience with this? Any help is greatly appreciated, thanks!

[davidtheclark]

I am on v0.49.1 and I'm also unable to figure out how to use event.target in event listeners without triggering Flow errors. Can't seem to figure out any configuration that doesn't trigger errors. Some documentation about this would be very nice.

[Satyam]

I declared it like this:

(event: UIEvent & { target: HTMLInputElement & { files: Array<string> } })

[MarcoNicolodi]

@Satyam it still trigger errors. Im using version 0.60.1

[Satyam]

@MarcoNicolodi Sorry I can't help. I gave up on Flow. One reason it didn't complain on my supposed fix was that Flow had bailed out earlier, which led me to assume I got this right.

I also tried: event: SyntheticInputEvent<> and it seemed to work, though it might be due to the same failure to report.

[kentcdodds]

This seemed to work for me: event: SyntheticInputEvent<HTMLInputElement> :+1:

[TrySound]

This probably can be closed.
/cc @vkurchatkin

[ghost]

Hey everyone,

I'm trying to statically type a change event handler on a file input. My JavaScript looks like this:

const getFileFrom = (element: HTMLInputElement): Promise<File> =>
    new Promise((resolve, reject) => {
        element.addEventListener('change', (event & { target: HTMLInputElement }) => {
            resolve(event.target.files[0]);
        });
    });

However I get this, semi cryptic error message:

_[flow] call of method addEventListener (Function cannot be called on any member of intersection type intersection Member 1: function type Error: string This type is incompatible with the expected param type of string enum Member 2: function type Error: string This type is incompatible with the expected param type of string enum Member 3: function type Error: string This type is incompatible with the expected param type of string enum Member 4: function type Error: string This type is incompatible with the expected param type of string enum Member 5: function type Error: string Expected string literal wheel, got change instead string literal wheel Member 6: function type Error: string This type is incompatible with the expected param type of string enum Member 7: function type Error: string This type is incompatible with the expected param type of string enum Member 8: function type Error: string This type is incompatible with the expected param type of string enum Member 9: function type Error: function This type is incompatible with union: object type | EventHandler)_

Looking through the flow source, I can't seem to find any example of what I'm trying to do. Does anyone else have experience with this? Any help is greatly appreciated, thanks!

---

Don't put the type of event

---