React 중복 파일 업로드 오류 해결 방법

 

🤷‍♂️ React에서 동일한 파일 업로드 구현

---

프로젝트중에 PDF 파일 업로드 기능 구현 당시 동일한 파일을 업로드 하는 경우  input태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제가 발생했다. 

 

파일 업로드 과정 

브라우저에서 PDF 업로드를 클릭하면 파일 탐색기 창이 열리고 파일을 선택후에 파일을 업로드한다. 

 

여기서 오류는 동일한 파일을 두번 이상 업로드시 onChange 이벤트가 발생하지 않는 문제였다. 

20230920001_00_40.pdf 파일을 업로드하고 다시 20230920001_00_40.pdf 파일을 업로드하면 onChange 이벤트가 발생하지 않는다. 

 

정리: React에서 동일한 파일을 연속해서 선택했을 때 input 태그에 onChange 이벤트 핸들러 함수가 동작하지 않아서 동일한 파일은 연속적으로 업로드할 수가 없다. 

 

 

 

🤷‍♂️ 문제 해결 

---

다음 예제 소스로 동일한 파일을 연속해서 선택했을 때 onChange 이벤트가 동작하거나 동작하지 않는 시나리오를 살펴보자.

 

중복파일을 업로드하면 onChange 이벤트가 발생하지 않는 문제 코드

<Button
  component="label"
  sx={{ fontSize: '16px' }}
  fullWidth={true}
  variant="text"
  size="small"
  startIcon={<SvgPdfUpload />}>
  PDF 업로드
  <VisuallyHiddenInput
    type="file"
    multiple
    onChange={onFileChange}
    accept=".pdf,.PDF"
  />
</Button>

 

이벤트 핸들러 함수가 정상적으로 동작 시나리오

1. 파일 업로드 버튼 클릭
2. 파일 탐색기 창에서 test_file.pdf 파일 선택 후 열기 버튼 클릭
3. 파일 탐색기 창에서 test_fileB.pdf 파일 선택 후 열기 버튼 클릭
4. 파일 탐색기 창에서 test_file.pdf 파일 선택 후 열기 버튼 클릭

중복되지 않은 경우에는 파일 업로드가 잘되었다. 

 

이벤트 핸들러 함수가 동작하지 않음 시나리오

1. 파일 업로드 버튼 클릭
2. 파일 탐색기 창에서 test_file.pdf 파일 선택 후 열기 버튼 클릭
3. 파일 탐색기 창에서 test_file.pdf 파일 선택 후 열기 버튼 클릭

같은 파일을 업로드시 onChange 이벤트가 발생되지 않아서 파일을 업로드할 수 없다.

 

해결 방법

위 문제이벤트가 발생했던 원인은 같은 중복 파일을 upload할 경우 onChange event가 trigger되지 않는다.

* onChange는 실질적인 내용 변화에만 trigger되기 때문이다. e.target.value 업로드한 file 값이 있기 때문에 같은 업로드할 경우 값이 바뀌지 않았다고 인지해서 onChange 이벤트가 발생되지 않는다.  

 

따라서 file이 uploade되면 onChange 이벤트 핸들러 함수가 정상적으로 동작하도록 하기 위해서는 input 태그에 onClick 이벤트 핸들러 함수를 추가하고 event.target.value를 빈 값 ('') 또는 null로 초기화하는 코드로 해결했다. 

 

onChange, onClick로 넘어오는 이벤트 

e.target.value

 

초기와 해주자

 

 

 

중복파일 업로드 해결 코드

//파일 업로드 중복파일방지
const onClickPreventDuplication = (e: any) => {
  e.target.value = null;
};

<Button
  component="label"
  sx={{ fontSize: '16px' }}
  fullWidth={true}
  variant="text"
  size="small"
  startIcon={<SvgPdfUpload />}>
  PDF 업로드
  <VisuallyHiddenInput
    type="file"
    multiple
    onChange={onFileChange}
    onClick={onClickPreventDuplication}
    accept=".pdf,.PDF"
  />
</Button>

 

event.target.value를 null로 할당하는 이벤트 핸들러 함수를 input 태그의 onClick에 추가하고 동일한 파일을 연속해서 선택하면 onChange 이벤트 핸들러 함수가 정상적으로 동작하는 것을 확인할 수 있습니다.

 

onChange 값이 파일 업로드시에 초기화 되기 때문에 중복된 값으로 인식하지 않아서 같은 파일을 파일 업로드해도 onChange 이벤트 발생이 잘된다. 

 

중복된 파일을 연속적으로 업로드할 수있는 오류를 해결 방법을 공유합니다.

 

---

URL인코딩 & 디코딩 해보기