뷰에서 이미지 파일을 서버로 전송하기 전에 사용자가 업로드를 위해 선택한 파일이 이미지 파일인지 체크를 하도록 코드를 작성하였습니다. 하지만 엄연히 뷰 단계에서의 파일 체크일 뿐, 만약 이미지 파일 체크 코드가 작동을 하지 않거나 다른 경로를 통해 업로드 url매핑 메서드를 호출할 경우 이미지가 아닌 파일도 업로드될 가능성이 있습니다.
따라서 좀 더 확실히 이미지 파일만 처리를 보장하는 메서드가 되도록 하기 위해서 업로드를 수행하는 url매핑 메서드에도 전달 받은 파일이 이미지 파일인지 체크를 하는 코드를 추가해줄 것입니다. 파일을 체크하여 파일이 아닐 경우 에러 상태 코드를 전송을 하여, 뷰에서 그에 따른 경고창이 출력되도록 구현할 것입니다.
전달 받은 파일이 이미지인지 아닌지 체크를 하기 위해서 파일의 MIME TYPE속성을 활용할 것입니다. MIME TYPE이란 쉽게 말해 파일이 어떠한 종류의 파일인지에 대한 정보가 담긴 라벨(Label)이라고 보시면 됩니다. Java에서 파일의 Mime Type을 반환해주는 메서드를 제공하고 있는데 nio패키지에 Files클래스의 probeContentType()메서드입니다.
probeContentTpye()메서드를 호출하여 반환받은 Mime Type에 대한 데이터가 image인지 체크를 하여 image인 경우 업로드 코드가 그대로 실행이 되도록 할 것입니다. image가 아닌 경우 업로드에 관한 코드가 실행이 되지 않고 상태 코드 400을 뷰에 반환하도록 할 것입니다.
뷰에서는 ajax의 error속성을 추가하여 상태코드 400을 전달받았을 때 실행이 되는 콜백 함수를 속성 값으로 부여하여 잘못된 형식의 파일이라는 경고 문구를 뜨도록 할 것입니다.
파일 유형을 체크하는 코드는 업로드를 수행하는 코드가 실행이 되기 전에 실행이 되어야 하기 때문에 업로드 url매핑 메서드 구현부의 최상단에 코드를 작성할 것입니다.
/* 이미지 파일 체크 */
for(MultipartFile multipartFile: uploadFile) {
File checkfile = new File(multipartFile.getOriginalFilename());
String type = null;
try {
type = Files.probeContentType(checkfile.toPath());
logger.info("MIME TYPE : " + type);
} catch (IOException e) {
e.printStackTrace();
}
}
전달받은 파일이 어떠한 MIME TYPE을 가졌는지에 대한 데이터를 얻었습니다. 이를 image인지 아닌지를 체크해야 합니다. MIME TYPE이 이미지일 경우 MIME TYPE 값은 아래와 같을 것입니다.
image/gif, image/png, image/jpeg, image/bmp, image/webp
그 외 더 많은 MIME TYPE은 MIME TYPE 참고
MIME TYPE이 image 인 경우 보시다시피 첫 단어가 image 인 것을 알 수 있습니다. 따라서 첫 단어가 image 인지 아닌지를 통해서 image 파일 임을 판단하겠습니다. 이를 위해 String 클래스의 startsWith() 메서드를 사용할 것입니다. startsWiath() 메서드는 String 타입의 데이터를 파라미터로 전달받는데, 체크 대상인 Stirng 데이터가 메서드의 파라미터로 전달받은 문자로 시작할 경우 true를 그렇지 않을 경우 false를 반환합니다.
MIME TYPE이 image가 아닌 경우 구현부가 실행이 되는 if문을 아래와 같이 작성했습니다.
if(!type.startsWith("image")) {
List<AttachImageVO> list = null;
return new ResponseEntity<>(list, HttpStatus.BAD_REQUEST);
}
ResponseEntity의 생성자와 상태 코드에 따른 HttpStatus의 상수 값들을 알고 싶으시다면
API 문서를 참고하시면 됩니다.
잘못된 파일이 전달받았음을 알리는 상태 코드가 400인 response를 전달 받았을때 이를 처리 해줄 코드를 추가해주어야 합니다. 현재 작성되진 ajax에 상태코드가 200 인 경우 응답을 하는 success 속성만 추가되어져 있습니다. 따라서 에러 상태코드 일 때 응답을 하는 error 속성을 추가해주고 속성 값으로 콜백 함수를 부여합니다.
콜백 함수에 잘못된 파일이 선택되었음을 알리는 문구는 경고창을 출력하도록 코드를 작성하였습니다.
,
error : function(result){
alert("이미지 파일이 아닙니다.");
}
테스트를 위해서 이미지가 아닌 파일을 전송해야 하기 때문에 뷰(View)에서 이미지 파일을 체크하는 JS코드를 잠시 주석 처리하여 테스트합니다.