[TIL] Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 에러

사진 업로드 기능을 만들던 중 에러가 발생했다.

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

input 창에서 사진을 고르다가 취소를 눌렀더니 바로 위와 같은 에러가 생겼다.

내용을 검색해보니 input을 통해 이미지 업로드시, 이미지 선택 후 취소 버튼을 click하면 input에 걸려있는 함수는 그대로 작동을 하지만, 실제로 파일이 없어서 에러가 발생한다고 한다.

---

e.target.file.length를 콘솔로 찍으면 파일 업로드 시 1 업로드를 취소 한 경우 0이 나오게 된다. 즉 예외처리를 해줘야한다.

기존코드

  const onFileChange = (e) => {
    const {
      target: { files }
    } = e;
    const theFile = files[0];
    const reader = new FileReader();
    reader.onloadend = (finishedEvent) => {
      const {
        currentTarget: { result }
      } = finishedEvent;
      setAttachment(result);
    };
    reader.readAsDataURL(theFile);
  };

수정한 코드

  const onFileChange = (e) => {
  const {
    target: { files }
  } = e;
  
  if (files.length === 0) return;  // 예외처리
  
  const theFile = files[0];
  const reader = new FileReader();
  reader.onloadend = (finishedEvent) => {
    const {
      currentTarget: { result }
    } = finishedEvent;
    setAttachment(result);
  };
  reader.readAsDataURL(theFile);
};

항상 파일 업로드를 할 때 신경 써줘야하는 부분 같아서 기록을 남겼다.