[TIL] 2024-03-07 input[file] onChange 같은 파일 등록 안 되는 현상

input file로 해서 이미지 받는 컴포넌트를 제작중인데, 이상하게 파일1을 넣었다가 삭제하고 다시 파일1을 넣으면 아무 변화가 없었다. 파일1을 넣고 파일2를 넣으면 잘 작동하는데 같은 파일을 넣으면 콘솔도 찍히지 않았다.

검색을 해보니 file은 onChange 로직이어서 같은 파일을 업로드 시 event trigger가 작동하지 않는다고 한다. 그래서 이미지의 정보를 내가 가진 다음에는 동작의 마지막에서 정보를 지워 빈 상태로 만들어야 다음 번에 똑같은 파일을 넣었을 때도 onChange event가 trigger된다.

// 원래
const handleFileChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
    const { files } = target;
    if (files?.length) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        if (typeof e.target.result === 'string') {
          img.src = e.target.result;
        }
        img.onload = () => {
          setState((v) => ({ ...v, cropImage: reader.result, file: files[0], crop: true }));
        };
      };
      reader.readAsDataURL(files[0]);
    }

// 수정
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const { files } = e.target;
    if (files?.length) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        if (typeof event.target.result === 'string') {
          img.src = event.target.result;
        }
        img.onload = () => {
          setState((v) => ({ ...v, cropImage: reader.result, file: files[0], crop: true }));
        };
      };
      reader.readAsDataURL(files[0]);
      reader.onloadend = () => {
        e.target.value = '';
      };
    }
  };

• 참고

[react] input (file)에 같은 파일 다시 올리기 (+image preview)