input type="file"에서 onChange는 실질적인 데이터가 바뀔때만 반응하기때문에 동일한 파일을 다시 업로드할 때는 이벤트가 작동하지 않아 value를 reset 해줄 필요가 있다.
const handleFileReader = async (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
if (submitRef) {
submitRef?.current?.click();
}
e.target.value = ""; //동일한 파일을 재선택해도 이벤트가 작동하도록
}
};
<input
type="file"
accept="image/jpg,image/png,image/jpeg,image/gif"
onChange={handleFileReader}
ref={fileInput}
/>