File input with React JS and TypeScript

I have started rewriting my Image Resizer web app with React JS and TypeScript. One of the required features of the app is to allow the user to select images on their computer.

I searched online but I could not find a direct answer for React JS and TypeScript, I could only find the solution for React JS but it turns out React with TypeScript does some things differently. After spending a little while I finally figured out how one can go about accessing the files using a file input.

Below is my solution.

import * as React from "react";

export class FileSelector extends React.Component<undefined, undefined>
{
    constructor(props: any)
    {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(selectorFiles: FileList)
    {
        console.log(selectorFiles);
    }

    render ()
    {
        return <div>
            <input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
        </div>;
    }
}

With React JS and TypeScript I found that I prefer to use the arrow function with the onChange attribute on the input element. From there you can access the files and pass them to a function. In that function you can just add an argument of type “FileList”.

This is a really simple problem but it took me much longer than it should have. I would really like to know if I am doing this wrong, or if there is a better way to go about doing this.