React で file upload する方法

input tag に Change Event Handler を指定する。

export default function UploadFile() {
  
  const [formState, setFormState] = useState<File>();

  const onFileInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const { files } = event.currentTarget;
    
    if (files === null)
      return;

    const file = files[0];
    setFormState(file);
  }
  return (
    <input
      type="file"
      onChange={onFileInputChange}
    />);
}

form で選択した file が FileList 型で files プロパティの中に入っている。 input type が file 以外の時、event.currentTarget.files は null になる。