TIL 20211112 [항해99 58일차]

프로필 업로드 관련 오류

오류. 폴더선택 눌러서 사진을 선택했다가 다시 폴더선택 눌렀다가 취소하면 오류 발생

• 오류가 난 이유
  파일을 선택한 후 다시 파일 선택하려고 폴더열기 했다가 변심해서 취소를 누르게되면 file이 undefined가 된다. 그럴경우 reader.readAsDataURL(file);이 실패라는 오류가 나온다.

• 해결방안

 // 기존 파일 미리보기
  const filePreview = (e) => {
  const reader = new FileReader();
  const file = fileInput.current.files[0];
  reader.readAsDataURL(file);
  reader.onloadend = () => {
  //  console.log(reader.result);
  dispatch(setPreview(reader.result));
  };
  setFileData(e.target.files[0]);
  e.target.value = '';
  };

기존 코드로 진행 했을때 위 사진의 오류가 나왔다.

const [fileData, setFileData] = React.useState(null);

  // 파일 미리보기 (오류 해결 코드)
  const filePreview = (e) => {
    const reader = new FileReader();
    const file = fileInput.current.files[0];
    //file이 undefined일 경우 예외처리
    if (file === undefined) {
      dispatch(setPreview(reader.result));
      setFileData(file);
    } else {
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        //  console.log(reader.result);
        dispatch(setPreview(reader.result));
        setFileData(file);
      };
    }
  };
  
   if (fileData) {
      formData.append('profile', fileData);
    }

파일을 선택한 후 다시 파일 선택하려고 폴더열기를 했다가 변심해서 취소를 누르게되면 file이 undefined가 되고, 그럴경우 reader.readAsDataURL(file);이 실패라는 오류가 나온다. 그래서 file이 undefined일 경우인 예외 처리를 추가해줬다. file이 undefined일 경우 오류가 나왔던 reader.readAsDataURL(file);이부분은 제거했다. reader.readAsDataURL(file);이부분이 제거 됐기때문에 변심해서 취소를 누르게되면 기존에 저장된 사진으로 돌아가게된다.

위 사진을 통해 오류 없이 취소를 눌러도 기존사진으로 잘 돌아가는 걸 확인할 수 있다.😊

---

오늘은 이정도 오류가 해결됐을때 사용자도 불편함 없이 사용 할 수 있을지에 대해서 생각해보고 결정하는 경험을 가졌다. 나는 일단 이미지를 올려서 변경했다가 다시 이미지 변경을 위해 파일업로드를 클릭했다가 변심해서 취소를 눌렀을 때 원래 처음 이미지로 돌아가도 괜찮다고 생각했다. 처음이미지로 돌아갔을때 사용자가 원하는 이미지로 변경하거나 그대로 하거나를 다시 선택하면 되기 때문에 그렇게 생각했다.
그래서 이부분은 나중에 서비스 배포하고 사용자를 받고 사용자 피드백을 받아 유지보수 할 때 이부분 피드백이 있을 경우 다시 수정해 봐야겠다. 서비스 배포 후 사용자의 어떤 피드백이 들어올지 너무 궁금하고 사용자 피드백에 맞게 수정하는 부분도 재밌을것같다!😀