react-image-file-resizerで画像のリサイズを行う

Next.jsアプリで画像アップロード機能を作成する際に、クライアント側で画像のリサイズ（縮小）を行ったものをプレビュー画像として表示したかったので「react-image-file-resizer」を使用した。

READMEのExampleを参考に組み込めば手軽にリサイズを実現できた。

import React, { useState } from 'react'

export const InputImage = () => {
  const [name, setName] = useState('')
  const [thumbnail, setThumbnail] = useState<string | null>(null)

  const resizeFile = (file: Blob): Promise<string> => {
    return new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        300,
        300,
        'JPEG',
        100,
        0,
        (uri) => {
          resolve(uri as string)
        },
        'base64'
      )
    })
  }

  const onChange = async (event) => {
    try {
      const file = event.target.files[0]
      const image = await resizeFile(file)
      setThumbnail(image)
      setName(file.name)
    } catch (err) {
      console.error(err)
    }
  }

  return (
    <>
      <input type="file" onChange={onChange} />
      {thumbnail && <img src={thumbnail} alt={name} />}
    </>
  )
}