Spring Boot + Thymeleaf + htmx: MaxUploadSizeExceededException(413) handling

[knowledgefactory4u]

There is an endpoint to upload a file, and I am trying to handle the MaxUploadSizeExceededException(Global) and show the custom message on the UI. 

But the application is not showing the error message on the UI.

One thing is sure: the upload request is not hitting the controller; in between, it is intercepting and not returning any response.

Console error:

Here is the code that I have tried so far:

pom.xml

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>5.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>htmx.org</artifactId>
            <version>1.9.12</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

application.properties

spring.servlet.multipart.max-file-size=12MB
spring.servlet.multipart.max-request-size=12MB

FileUploadController.java

@Controller
public class FileUploadController {

    @PostMapping("/")
    public String handleFileUpload(@RequestParam("file") MultipartFile file,
                                   Model model) throws IOException {

        if (file.isEmpty()) {
            model.addAttribute("warning", "Please select a file to upload");
        } else {
            storageService.store(file);
            model.addAttribute("files", storageService.loadAll());

            model.addAttribute("message",
                    "File successfully uploaded !");
        }
        return "message";
    }
}

GlobalExceptionHandler .java

@ResponseStatus(HttpStatus.PAYLOAD_TOO_LARGE)
    @ExceptionHandler(value = MaxUploadSizeExceededException.class)
    public ModelAndView errorHandler(HttpServletRequest req,
                                     MaxUploadSizeExceededException e) {

        ModelAndView mav = new ModelAndView();
        mav.addObject("danger", "File size exceeds 12 MB");
        mav.setViewName("message");
        System.out.println(mav);
        return mav;
    }

upload.html

<div class="row mx-0 justify-content-center">
    <div class="col-md-9 col-lg-7 mt-2 col-md-12">
        <form
                method="post"
                class="w-100 rounded-1 p-4 border bg-white"
                hx-encoding='multipart/form-data'
                hx-post='/'
                hx-target="#message"
        >
            <label class="d-block mb-4">
                <span class="form-label d-block">Upload</span>
                <input required name="file" type="file" class="form-control"/>
            </label>
            <div class="mb-3">
                <button type="submit" class="btn btn-primary px-3 rounded-3">
                    Upload File
                </button>
            </div>
        </form>
        <div class="message" id="message"></div>
    </div>
</div>

message.html

<div th:if="${warning}">
    <div class="alert alert-warning alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <span th:text="${warning}"></span>
    </div>
</div>
<div th:if="${danger}">
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <span th:text="${danger}"></span>
    </div>
</div>

Could you point me in the right direction or tell me what I am missing?

I don't want to reload the page

I am not using Spring Boot and Thymeleaf library for htmx

[knowledgefactory4u]

I tried with response-targets.js as well to handle the 5**/4** error, but it is still not working.

<div hx-ext="response-targets">
    <div class="row mx-0 justify-content-center">
        <div class="col-md-9 col-lg-7 mt-2 col-md-12">
            <form
                    method="post"
                    class="w-100 rounded-1 p-4 border bg-white"
                    hx-encoding='multipart/form-data'
                    hx-post='/upload'
                    hx-target="#message"
                    hx-target-error="#message"
            >
                <label class="d-block mb-4">
                    <span class="form-label d-block">Upload</span>
                    <input required name="file" type="file" class="form-control"/>
                </label>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary px-3 rounded-3">
                        Upload File
                    </button>
                </div>
            </form>
            <div class="message" id="message"></div>
        </div>
    </div>
</div>

[wimdeblauwe]

Can you try what happens if you remove @ResponseStatus(HttpStatus.PAYLOAD_TOO_LARGE) from your GlobalExceptionHandler? I guess you need to return an OK so that htmx will swap in your error message.

[knowledgefactory4u]

I tried it and explored further, and found the response of two scenarios

Case 1: (Successfull upload) Response

{
  "origin": "local",
  "type": "response",
  "correlation": "b29f96fd13614b90",
  "duration": 528,
  "protocol": "HTTP/1.1",
  "status": 200,
  "headers": {
    "Connection": [
      "keep-alive"
    ],
    "Content-Language": [
      "en-US"
    ],
    "Content-Type": [
      "text/html;charset=UTF-8"
    ],
    "Date": [
      "Sat, 29 Jun 2024 21:27:27 GMT"
    ],
    "Keep-Alive": [
      "timeout=60"
    ],
    "Transfer-Encoding": [
      "chunked"
    ],
    "Vary": [
      "HX-Request"
    ]
  },
  "body": "\r\n<div>\r\n    <div class=\"alert alert-success alert-dismissible\">\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>\r\n        <span>File successfully uploaded !</span>\r\n    </div>\r\n</div>\r\n\r\n"
}

Case 2: (File Size exceeds 12 MB) Response

{
  "origin": "local",
  "type": "response",
  "correlation": "c118546100d51bc8",
  "duration": 1221,
  "protocol": "HTTP/1.1",
  "status": 200,
  "headers": {
    "Connection": [
      "close"
    ],
    "Content-Language": [
      "en-US"
    ],
    "Content-Type": [
      "text/html;charset=UTF-8"
    ],
    "Date": [
      "Sat, 29 Jun 2024 21:29:43 GMT"
    ],
    "Transfer-Encoding": [
      "chunked"
    ]
  },
  "body": "\r\n\r\n<div>\r\n    <div class=\"alert alert-danger alert-dismissible\">\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>\r\n        <span>File size exceeds 12 MB</span>\r\n    </div>\r\n</div>\r\n"
}

There is a mismatch for the header in success and failed scenario. Means, the connection is closed.