[React+TypeScript] input(type="file") 에서 똑같은 파일 연속으로 업로드 되지 않는 문제 해결하기

트위터 클론 코딩 챌린지를 하고 있는데 이것저것 테스트를 해보면서 자잘한 불편사항이나 버그가 꽤 많이 발견된다. 이번에 발견한 것도 그런 것들 중 하나다.

 

문제 상황

 

이미지와 같이, 춘식이1 사진을 업로드 한 이후에 춘식이2 사진을 업로드 하는 것은 문제가 없었지만, 춘식이2 사진을 업로드한 후에 별도의 새로고침과 같은 조작없이 똑같은 춘식이2 사진을 업로드하려고 하면 파일 첨부가 아예 되지 않았다. 나는 파일 첨부가 되면, 아이콘 버튼이 비활성화되고, 어두워지도록 해놓았는데 똑같은 파일을 연속으로 업로드하려고 하면 이것이 적용이 되지 않는 것을 확인할 수 있다. 즉, 이전에 업로드한 파일과 똑같은 파일을 연속으로 업로드할 수 없는 문제가 발생했다.

 

이것은 onChange 이벤트를 통해 input(type=file)에 첨부된 파일의 변화를 감지하는데, 이전 파일과 똑같은 파일을 업로드하려고 하면 file이 변화되지 않았으므로 onChange가 실행되지 않는 것이다.

 

 

해결방법

onChange가 실행될 때마다, 첨부한 파일을 가지고 원래 하려던 로직을 수행하고, 마지막에 event.target.value를 비워준다. 이렇게 하면 이전과 똑같은 파일을 첨부하더라도, 무조건 변화가 일어나게 되므로 항상 이벤트 함수가 실행된다.

 

 

소스코드

import { useState } from "react";

export default function PostForm() {
  const [file, setFile] = useState<File | null>(null);

  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  
  	// 원래 수행하려던 로직 수행 후에
    const { files } = e.target;
    if (files && files.length === 1) {
      setFile(files[0]);
    }
    
    // 타켓의 value값을 비워준다.
    e.target.value = "";
  };

  return (
    <form>
      <input
        onChange={onFileChange}
        type="file"
        id="file"
        accept="image/*"
      />
    </form>
  );
}