ChatGPT랑 비슷한 File Input 컴포넌트 구현하고 react-hook-form에 연동하기(파일 누적 관리하기)

import React, { useState } from 'react'
import { useForm, Controller } from 'react-hook-form'

const FileInputForm = () => {
  const { handleSubmit, control, setValue, getValues } = useForm()
  const [filesArray, setFilesArray] = useState([])

  const onSubmit = data => {
    console.log('Submitted files:', getValues('files'))
  }

  const handleFileChange = event => {
    const selectedFiles = Array.from(event.target.files)

    if (selectedFiles) {
      // Array.from에 넣는 이유는 selectedFiles가 array가 아닌 FileList이기 때문입니다.
      const selectedFilesArray = Array.from(selectedFiles)

      // 보여주는 파일 리스트 정보 처리
      const newFileInfoList = selectedFilesArray.map(file => ({
        name: file.name,
        size: `${(file.size / 1024).toFixed(2)} KB`,
        url: URL.createObjectURL(file),
      }))
      setFileInfoList(prevFileInfoList => [
        ...prevFileInfoList,
        ...newFileInfoList,
      ])

      // files form value 처리
      // 기존 파일 목록과 새로 선택한 파일 목록을 합칩니다.
      // 이렇게 처리하지 않으면 새로 선택한 파일이 기존 파일을 대체합니다.
      const currentFiles = Array.from(getValues('files') || [])
      const updatedFiles = [...currentFiles, ...selectedFilesArray]

      // array에 담긴 정보를 가지고 FileList를 만듭니다.
      const fileList = new DataTransfer()
      updatedFiles.forEach(file => fileList.items.add(file))
      setValue('files', fileList.files)
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="files"
        control={control}
        defaultValue={[]}
        render={() => (
          <input type="file" onChange={handleFileChange} multiple />
        )}
      />
      <ul>
        {filesArray.map((file, index) => (
          <div key={index}>
            <img src={file.url} alt={file.name} />
            <li>{file.name}</li>
            <li>{file.size}</li>
          </div>
        ))}
      </ul>
      <button type="submit">Upload</button>
    </form>
  )
}

export default FileInputForm