Reactで画像ファイルを選択したときにプレビュー画像を表示する方法

概要

<input type="file">で画像ファイルを選択したときにFileReaderを使用してプレビュー画像を表示する方法

プログラム

画像ファイル選択のJSXのコード

// ※MUIのButtonコンポーネントを使用している
<Button variant="contained" component="label" color="success">
   画像ファイルを選択
   <input type="file" accept="image/*" onChange={onChangeFileInput} hidden />
</Button>

input要素が変更された時のイベントハンドラーのコード

app.js

// プレビュー画像のデータURLを格納するstate
const [imagePreview, setImagePreview] = useState<string | ArrayBuffer | null | undefined>(undefined)

/**
 * ファイル入力欄が変更したときのイベントハンドラー
 * @param {React.ChangeEvent<HTMLInputElement>} event ファイルインプットイベントオブジェクト
 * @returns {void}
 */
const onChangeFileInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
  setImagePreview(undefined)

  // 何も選択されなかったら処理中断
  if (event.target.files?.length === 0) {
    return
  }

  // ファイル画像でなかったら処理中断
  if (!event.target.files?.[0].type.match("image.*")) {
    return
  }

  // FileReaderクラスのインスタンスを取得
  const reader = new FileReader()

  // ファイルを読み込み終わったタイミングで実行するイベントハンドラー
  reader.onload = (e) => {
    // imagePreviewに読み込み結果（データURL）を代入する
    // imagePreviewに値を入れると<output>に画像が表示される
    setImagePreview(e.target?.result)
  }

  // ファイルを読み込む
  // 読み込まれたファイルはデータURL形式で受け取れる（上記onload参照）
  reader.readAsDataURL(event.target?.files[0])
}

プレビュー画像表示用のJSXのコード

// imagePreviewにプレビュー画像用のデータURLが格納される
{!!imagePreview && (
  <output>
    <img src={imagePreview} alt="画像プレビュー" />
  </output>
)}