[html] input 이미지 파일만 올리게 하기

배경

이미지 파일만 올라가야 하는 부분이 있어서 input에 accept="image/*"을 추가해주었다. 하지만 사용자가 파일 유형을 모든 종류의 파일로 바꿔서 다른 유형 파일을 올리는 경우가 생긴다.

원인

• <input type="file">

accept 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 accept를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.

...자연스러운 현상이었다!🤩

해결책

그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 accept 특성을 보조해야 합니다.

여기에서 말하는 서버는 api 서버를 말하는 것 같다. (api error)
프론트에서 할 수 있는 방법도 찾아보자.

• “how to check file is image or not in javascript” Code Answer

function isFileImage(file) {
    return file && file['type'].split('/')[0] === 'image';
}

이렇게 한번 더 검증해주면 끝이다.
해결!✨