Reactで input file サムネイル表示

#Reactで input file サムネイル表示

<input type="file" /> で画像のサムネイルを表示したい

コンポーネントの内容

InputFile.tsx

import React, { useState } from 'react'

export interface Props {
  name: string
  defaultValue?: any
}

const InputFile: React.FC<Props> = ({ name, defaultValue }) => {
  const [value, setValue] = useState(defaultValue)
  const onChangeInputFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (e: any) => {
        console.log(e.target.result)
        setValue(e.target.result)
      }
      reader.readAsDataURL(file)
    }
  }
  return (
    <div>
      <input type="file" name={name} id="" src={value} onChange={onChangeInputFile} />
      <div>
        <img src={value} />
      </div>
    </div>
  )
}

export default InputFile

codepen

See the Pen React + TypeScript Starter by Hideto (@HidetoNagamatsu) on CodePen.