[React] 이미지 업로드시, 썸네일 확인하기

이미지 파일 업로드 시, 해당 파일의 썸네일을 보고 싶을 때가 있다.
FileReader 기능을 사용해서 구현해보도록 하겠다.

   <div>
      <input type="file" onChange={handleFileUpload} />
      <img src={thumbnail} width="40" height="40" />
   </div>

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
	const [thumbnail, setThumbnail] = useState<string>('');
	const file = event.target.files?.[0];
        if (file) {
            const reader = new FileReader()
            reader.onload = function (event: ProgressEvent<FileReader>) {
                const img = new Image()
                img.onload = function () {
                    const canvas = document.createElement('canvas')
                    const ctx = canvas.getContext('2d')
                    canvas.width = 40
                    canvas.height = 40
                    ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)
                    const thumbnail = canvas.toDataURL()
                    setThumbnail(thumbnail)
                }
                img.src = event.target?.result as string
            }
            reader.readAsDataURL(file!)
        }
	}

 

썸네일 url 값을 상태값에 저장한 후 이미지 src 에 넣어주는 방식이다.
썸네일의 크기는 img width heigth 값과 canvas.width / canvas.heigth 값을 맞춰주는 것을 추천한다.