[React] 파일 사이즈가 크면 에러 메시지 띄우기

# 배경

회사에서 이미지 사이즈와 파일 사이즈에 제한을 두려고 했다.

백엔드에서도 제한을 뒀지만 API 호출하기 전에도 제한을 주려고 했다.

 

# 내용

나는 1MB 이상 이미지 파일이면 에러 메시지를 띄웠다.

const IMAGE_MAX_SIZE = 1 * 1024 * 1024;

만약 10MB로 하고 싶으면 1를 10으로 변경하면 된다.

 

# 코드

const IMAGE_MAX_SIZE = 1 * 1024 * 1024;

const FileStudy = () => {
    const [ imgErrMessage ,setImgErrMessage] = useState("이미지를 넣어주세요")
    return (
        <>
        <Input
            type="file"
            accept="image/*"
            name="file"
            onChange={(e) => {
                if (e.target.files[0]) {
                    e.target.files[0].size > IMAGE_MAX_SIZE
                        ? setImgErrMessage("용량이 너무 큽니다")
                        : setImgErrMessage("")
                } else {
                    setImgErrMessage("이미지를 넣어주세요")
                }
            }}
            style={{ width: 300, marginLeft: 10, marginTop: 10 }}
        />
            <Button
            onClick={()=>
            imgErrMessage==="" 
            ? message.success("성공했습니다."):message.error(imgErrMessage)}
            >

                확인</Button>
        </>
    )
}

처음엔 파일이 없으니까 버튼을 누르면 "이미지를 넣어주세요" 메시지가 뜬다.

파일이 크면 "용량이 너무 큽니다" 메시지가 뜨고

파일 사이즈가 정상이면 메시지가 ""가 된다.  imgErrMessage 값이 "" 이게 되면 성공한 것이다.

 

imgErrMessage==="" 이 경우 API를 연결하면 된다. 우리는 API 통하여 AWS로 가서 이미지를 저장한다.

 

# 참조

https://github.com/YooGenie/react-study/issues/29

파일 사이즈가 크면 에러 메시지 띄우기 · Issue #29 · YooGenie/react-study