[리액트] input [type = 'file'] 중복 업로드 오류_⚡

 

[React_input[type='file']]

 

같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자

 

---

 

input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅

 

👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부

👉 [리액트] input 이미지 미리보기_🎨

 

---

 

<STUDY>

 

⚡ input file 업로드 코드

<label htmlFor="feedImage" onChange={handleAddImage}>
  <input type="file" id="feedImage" multiple style={{display: 'none'}}/>
  <AddPhotoAlternateRoundedIcon />
</label>

 

같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다.

 

즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데

바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다.

 

 

❓ 해결방법

 

   💡 onClick 이벤트 발생시 value 초기화하기

<label htmlFor="feedImage" onChange={handleAddImage} onClick={e => e.target.value = null}>
  <input type="file" id="feedImage" multiple style={{display: 'none'}}/>
  <AddPhotoAlternateRoundedIcon />
</label>

 

   - 위와 같이 event.target.value = null 이라는 onClick 이벤트를 추가해 주면 파일이 제대로 추가된다.

 

 

---

 

이 전에도 같은 이슈가 발생했었는데 해결하지 못했다.

이번에 이유를 알게 되었으니 같은 실수를 반복하지 않게 기록해 두어야겠다.

 

---

 

내가 보려고 정리하는 리액트 / 자바스크립트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview