[JS] input type="file" 동일 값 업로드하기!

지혜의 Devlog 📚·2022년 7월 28일
1
post-thumbnail

🐛 버그 발견

  • input 태그를 통해서 이미지 파일을 입력받고 있는 환경
  • onChange 이벤트를 통해서 이미지 파일 상태 값 저장
  • 이미지를 업로드하고, 삭제한 후 동일 이미지를 업로드할 때 버그 발생

🕵🏻 원인 분석중...

  • 이미지를 업로드하고, 삭제한 후 다른 이미지를 업로드할 땐 잘 작동됨
  • 동일 값일 때 input에서 onChange가 일어나는지 확인
  • onChange가 일어나지 않음

📚 해결 방안 및 학습 내용

  • ✨ onChange는 실질적인 데이터가 바뀔 때만 반응
  • ✨ 기존의 파일을 다시 업로드할 때는 이벤트가 작동하지 않으므로 value를 reset 해줘야 함
const onChange = (e) => {
  onUpload(e.target.files[0]);
  e.target.value = ''; // ✨value reset!
};



느낌점

아는 것도 다시 보자! 🙄

혹시 내용에 오류가 있다면 피드백 부탁드립니다. 🙇🏻‍♀️

0개의 댓글