[Error Handling] 최윤석 - 2022.06.10

> ### 어떤 에러인가요?
>
> ### 에러 메시지
> ```shell
> Mypage.tsx:51 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
> ```
>
> ### 에러 핸들링 방법
> * input 을 통해 이미지를 업로드를 하는 과정에서, 발생 되는 오류이다
> 이미지를 정상적으로 업로드 한다면 문제가 없으나, 이미지를 선택하는 창 까지 띄운 상태에서 취소를 하게 되는 경우
> 이미지 파일 업로드 input에 걸려 있는 함수는 그대로 작동을 하게 되나, 실제 파일이 없어서 에러가 발생하게 된다.
> 확인을 위해 e.target.file 을 체크 해보니, 파일의 업로드 시 e.target.file의 length가 1 업로드를 취소 한 경우 0이 나오게 된다.
> 도출되는 값을 통해서 코드를 작성하였고, 문제 없이 작동 된다.
>
>
```jsx
const onUploadImage = (e: React.ChangeEvent) => {
const file: any = e.target.files;
if (file.length === 0) {
return;
// input 이벤트는 실행 됐으나, 실제 파일이 업로드가 되지 않은 경우 그대로 종료
} else {
// 그 외의 경우에는 필요한 기능들이 작동하도록 작성

setModifiedUserInfo({ ...modifiedUserInfo, ["profile"]: file });
setImageFile(file);

const reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function (e: any) {
setPreview(e.target.result);
// 파일 리드를 통해 프리뷰에 미리보기 구현
}
};
```

>
> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> 링크