특정 파일 확장자를 선택할 때, input의 accept가 주는 함정

기존에 pdf 파일 첨부만 가능하게 구현된 feature에서

image 파일도 파일 첨부가 가능하도록 처리해달라는 티켓이 생성되었습니다.

화요일 티켓은 아주 달구나라고 생각하며 임했는데, 허를 찔렸습니다.

---

1) input의 기본 속성으로 처리하려 했지만..

input의 accept 속성에 사용할 확장자명을 추가해 원하는 파일만을 선택이 가능합니다.

accept 속성에 쉼표(',')를 통해 허용 확장자를 추가할 수 있는데요.

기존에는 pdf 확장자명을 지닌 파일만 선택하도록 설정해줬지만, 모든 이미지 파일도 포함되도록 변경했습니다.

<input type="file" accept=".pdf, image/*" />

 

그러나 QA 단계에서 제한 확장자가 아닌 파일도 업로드가 가능하다는 답이 돌아왔습니다.

QA 응답을 보고선 바로 떠오른 게 있었는데요.

바로 파일 업로드 시, 모든 파일로 변경하는 상황이었습니다.

---

2) 파일 선택이 이뤄지는 함수에서 분기문을 통해 처리하자 

파일 업로드와 연관된 함수에서 파일의 타입에 따라 분기 처리를 함으로서

문제를 해결할 수 있었습니다.(input에 설정한 accept 속성은 유지해줬습니다!)

 const handleUpload = (event: ChangeEvent<HTMLInputElement>) => {
 	const files = event.currentTarget.files;
    if (!files) return;

    const file = files[0];
    const isAllowedFileType = file.type.includes('image') || file.type.includes('pdf');

    if (!isAllowedFileType) {
      // 에러 발생 시 처리해주면 되는 부분. 상태값이 될 수도, 모달 활성화가 될 수도 있겠네요.
      return;
    }
    ...
    }

 

QA 통과!