이슈
input tag의 file type 이용해서 이미지파일 업로드 기능을 구현했었는데, 간헐적으로 선택한 파일의 썸네일이 보이지 않는 이슈가 생겼다.
원인
<input
type='file'
onChange={(e) => uploadFile(e)}
/>이미지 파일을 선택하면 onChange 이벤트가 실행되어 form 데이터를 받는데, onChange는 실질적인 value가 바뀔때만 반응한다고 한다. 그래서 기존 파일을 다시 업로드 할 때는 이벤트가 작동하지 않았던 것이다.
해결
onChange의 콜백함수에 value를 리셋해주는 것을 추가하여 함수가 실행 될 때 value가 변경된 것으로 감지하게 하여 해당 문제를 해결했다.
const uploadFile = (e: any) => {
...
e.target.value = '';
};출처
