[BUG] 성적 엑셀파일 드래그앤드랍하면 다운로드됨

[kimhanui]

증상

@riyenas0925 @2kyung19

실행 환경

• OS: window 10 Home
• Browser: chrome

[riyenas0925]

@kimhanui 이거 아마 AdminLTE에서 Argon으로 부트스트랩 템플릿 변경하면서 기능 빼둬서 그럴껄??

[2kyung19]

드래그앤드랍 미구현 그냥 눌러서 파일입력 요망

[riyenas0925]

@kimhanui @2kyung19 이제부터 Exception 발생하면 GlobalExceptionHandler 클래스에서 잡아서 ResponseEntity를 통해 Ajax Error로 반환하도록 구현해야 할것 같음 ㅇㅇ

@kimhanui 이제 Exception은 아래처럼 관리하는게 좋을것 같은데 어떻게 생각함??

이전에 한 방식 보니까 Ajax의 success에서 파일 이름이 엑셀 형식이면 성공 띄우고 아니면 실패 표시하는 방식인데 이렇게 프론트 단에서 판정하는것보다 백엔드에서 판정하고 반환만 하는게 좋을것 같아서 아래와 같이 변경 했음

기존

파일 첨부(프론트) -> MultipartFile로 전송(백엔드) -> Ajax Success 응답 받기 -> 파일 형식 확인(프론트) -> 형식이 맞으면 Success, 틀리면 Fail 표시(프론트)

수정

파일 첨부(프론트) -> MultipartFile로 전송(백엔드) -> 스프링 Validate의 @Valid를 통해 엑셀 파일인지 검증 -> 만약 엑셀파일이 맞다면 Ajax Success로 응답, 만약 엑셀 파일이 아니면 Ajax Error로 응답

예시) 파일 업로드시 맞는 파일이면 status code 200 반환, 맞지 않으면 400 반환 -> 파일 업로드시 ModelAttribute를 사용 하였기 때문에 bindException으로 예외를 잡는다

GlobalExceptionHandler 일부분

/* @ModelAttribute Binding Error */
@ExceptionHandler(BindException.class)
protected ResponseEntity<ErrorResponse> handleBindException(BindException e) {
    final ErrorResponse response = ErrorResponse.of(ErrorCode.INVALID_INPUT_VALUE, e.getBindingResult());
    return new ResponseEntity<>(response, HttpStatus.BAD_REQUEST);
}

Error Code 일부분

INVALID_INPUT_VALUE(400, "C001", " Invalid Input Value"),
METHOD_NOT_ALLOWED(405, "C002", " Invalid Input Value"),
ENTITY_NOT_FOUND(400, "C003", " Entity Not Found"),
INTERNAL_SERVER_ERROR(500, "C004", "Server Error"),
INVALID_TYPE_VALUE(400, "C005", " Invalid Type Value"),
HANDLE_ACCESS_DENIED(403, "C006", "Access is Denied");

ajax Error request 반환 예시

{
   "message":" Invalid Input Value",
   "status":400,
   "errors":[
      {
         "field":"multipartFile",
         "value":"org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile@3480ad95",
         "reason":"save.htm is not Excel File"
      }
   ],
   "code":"C001"
}

jsp 사용 예시

$.ajax({
    url: '/trackJudge',
    data: formData,
    dataType: 'text',
    processData: false,
    contentType: false,
    type: 'POST',
    success: function (data) {
        $('#upload-name').html(filename);
        $('#filelabel').html('Success!');
        $('#filelabel').removeClass('btn-danger');
        $('#filelabel').addClass('btn-success');
    },
    error: function (response) {
        const error = JSON.parse(request.responseText);
        $('#upload-name').html(filename);
        $('#filelabel').html(error.message);
        $('#filelabel').addClass('btn-danger');
    }
})

Ref : https://cheese10yun.github.io/spring-guide-exception/

[riyenas0925]

@kimhanui @2kyung19 이제 드래그앤드랍 기능 사용안하니까 이슈 닫겠습니다~