Specify type for file upload event in react typescript

Question

I don't quite understand how event typing works, I'd like to specify a type here, but cannot quite figure out how to do it. I cannot seem to find a type reference for this specific case.

private handleChange (event /*:FileUplaodEvent or something */): void {
    this.setState ({
      csv: event.target.files[0],
    });
}

Any help would be appreciated...

edit: As answer by Mukesh Soni stated I used React.FormEvent<HTMLInputElement>, but for whatever reason the interface for files is a bit different for this type, it is actually: event.currentTarget.files rather than event.target.files.

Sebastiaan · Accepted Answer · 2021-05-13 20:17:19Z

39

The accepted answer didn't work for me.

If you want to access e.target.files or e.currentTarget.files You should use React.ChangeEvent<HTMLInputElement> as the event type .

Example:

const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      return;
    }

    // handle the input...
    console.log(e.target.files);
}


<Input type='file' onChange={handleChange}/>

edited May 13, 2021 at 20:17

answered Apr 5, 2021 at 11:09

Sebastiaan

1,14011 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mukesh Soni · Accepted Answer · 2019-08-13 09:03:58Z

10

The event argument for your input's onChange is actually react's synthetic event.

React synthetic event types are present on React object (assuming you have installed types for react).

(event: React.FormEvent<HTMLInputElement>)

React.FormEvent consists of all syhthetic events on form input elements. It is a generic type, i.e. accepts another type as an argument when you use it. In your case, that type argument is HTMLInputElement. Which results in a complete type of a form event on input element.

answered Aug 13, 2019 at 9:03

Mukesh Soni

6,6683 gold badges34 silver badges38 bronze badges

1 Comment

rü- Over a year ago

I didn't see it directly, so I repeat the edit from the question here: 'the interface for files is a bit different for this type, it is actually: event.currentTarget.files rather than event.target.files.'

Collectives™ on Stack Overflow

Specify type for file upload event in react typescript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related