input type='file' 동일 파일 재 선택 시 오류

프로젝트를 진행하면서 이미지 등록을 위해 input type='flie'을 사용하였다.

그런데 기능을 구현하면서 올렸던 이미지를 삭제 후 다시 동일한 이미지를 선택하였을 때 input의 onChange 이벤트가 발생하지 않는 것을 알았다.

 

• A이미지 선택 ➡️ change 이벤트 발생
• A이미지 삭제
• A이미지 재선택 ➡️Change 이벤트가 발생하지 않아서 파일이 업로드되지 않음.

 

input type이 file일 때 선택된 파일의 변경사항이 없으면 change 이벤트가 실행되지 않는다. 그래서 이미지를 삭제할 때 이미지 미리보기만 삭제하는 것이 아니라 input에 대한 초기화 과정이 필요했다.

 

여러 가지 방법 시도하기

시도한 방법 1

구글링 했을 때 봤던 방법 중 하나는 해당 input을 select하고 select한 input을 clear() 하는 것이었다.

하지만 DOM을 직접 조작하는 것을 지양하는 리액트의 특성상 끌리는 방법은 아니었다. 그리고 이미 input 커스텀을 위해 ref를 걸어두었기 때문에 최선의 방법은 아니라고 생각했다.

 

시도한 방법 2

두 번째는 ref의 current를 빈 값으로 변경하는 것이다. 

inputRef.cuurent = '';

하지만 프로젝트에서 타입스크립트를 사용하고 있었고 기본값을 null로 설정해 둔 상태였다. 

  const inputRef = useRef<HTMLInputElement | null>(null);

따라서 이런 식으로 타입지정을 해두었다. 따라서 만약 current 값을 '' 로 설정할 경우 타입을 <HTMLInputElement | string | null> 이런 식으로 타입으로 추가해야 돼서 마음에 들지 않았다. 그리고 결정적으로 파일을 초기화한 후에 다시 클릭했을 때 파일 선택이 불가능했다.

 

✅사용한 방법

최종적으로 input onChange 이벤트가 발생했을 때 e.target.value로 받아오는 파일값을 비우는 방법을 선택했다.

  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      encodeFileToBase64(file);
    }
    e.target.value = ''; //input value 초기화
  };

e.target.value=''로 값을 비우니 동일한 파일을 재선택해도 정상적으로 이벤트가 발생했다.

 

 

---

프로젝트 깃헙 링크

https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE

GitHub - prgrms-web-devcourse/Team-5YES-WuMo-FE: 🍩 5yes팀 최종 프로젝트 wumo front-end