같은 파일을 선택할 때

input 태그를 통해서 파일을 입력받을 때 onChange 이벤트를 이용해서 선택한 파일에 대한 처리를 지정해서 사용했다.

<input type="file" onChange={onChangeFile}/>

const onChangeFile = (e) => {
  console.log(e.target.files[0]);
}

이처럼 사용하다 보니 파일 A 파일 B가 있을 때, 아래와 같은 경우 onChange가 정상적으로 실행되었지만,

• 아무 파일도 선택되지 않은 상태에서 파일 A 혹은 파일 B를 선택하였을 때
• 파일 A가 선택된 상태에서 파일 B를 선택하였을 때 (혹은 그 반대)

아래의 경우에는 onChange 이벤트가 발생하지 않았다.

• 파일 A가 선택된 상태에서 파일 A를 선택했을 때 (B의 경우도 마찬가지)

즉 실질적인 데이터가 바뀌지 않으면 onChange 이벤트가 발생하지 않는다는 것이다.

해결 방법

const onChangeFile = (e) => {
  console.log(e.target.files[0]);
  e.target.value = ""; // value 초기화
}

이처럼 이벤트 핸들러에 input 태그의 값을 초기화 해주게 되면 같은 파일을 입력해도 이벤트가 작동 하도록 할 수 있다.