Get file object from file Input

The more current version of this would be something like:

function MyComponent(): JSX.Element {
  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const files = Array.from(e.target.files)
    console.log("files:", files)
  }

  return (
    <input onChange={handleFileSelected} type="file" />
  )
}

The attribute is found on e.target.files which you can get from the onChange event.

EDIT: Removed unnecessary ref code, hat tip Mark in comments 🙇

Leave a Comment