Spring Boot cannot render global error on multipart form submit

Question

Currently I am trying to upload a CSV file containing records and this part is working fine.

However on submission of this form, if a data is not valid or missing, or if there is an import failure, I want to return a simple error message without refreshing the page.

Is it possible to return an error message on the same popup form, or is there any alternative way to do this?

Please find the code snippet below.

Form/Page:

 <form id="uploadrecordform" method="POST" th:action="@{/import-record-file}" enctype="multipart/form-data">
            <div class="form">
                <h2>upload</h2>
                <div class="form-element">
                    <label for="file">Upload record file</label>
                    <input type="file" name="file" class="form-control-file" id="file" accept=".csv" required>
                </div>

                <div class="form-element">
                    <button type="submit">
                        <p th:text="#{submit_text}"></p>
                    </button>
                </div>
                <div role="alert" th:if="${globalError}">
                    <strong>Error:</strong>
                    <span th:text="${globalError}"></span>
                </div>
            </div>
        </form>

Note: on the page, there is an "add record" button and while clicking on the button, it opens the new form as a popup.

API sample code:

 @RequestMapping(value = "/import-record-file", method = RequestMethod.POST)
    @ResponseBody
    public String importUserRecordCsvFile( @Valid  @RequestParam("file") MultipartFile file, BindingResult result) {
        final String username = principal.getName();

        // validate file
        if (file.isEmpty()) {
            System.out.println("message Please select a CSV file to upload.");
    
            ObjectError error = new ObjectError("globalError", "this is test error");
                result.addError(error);
                if (result.hasErrors()) {
                    return "errors/import-record-file";
                }
        } 
 
        return "empty";
    }

Answer 1

I believe you are trying to make the controller validate the form and return the form back to the same pop up if there is an error.

You can do so using ajax. Let say your form is in a pop up and the pop up has the id popup.

<div id="popup">
    <form>
      <!-- form details -->
    </form>
</div>

You can submit your form via ajax and have the result displayed in the pop up itself without refreshing the whole page.

The ajax function will do something as below,

$.ajax({
    type: "POST",
    data: formData,
    url: url,
    success: function (data) {
        $('#popup').html(data); // data is always a simple html view
    }
});

The endpoint handling the form submit (in your case, the endpoint /import-record-file) will function as follows, in case of error, the whole form is displayed back in the popup and in case of success, a simple html success message can be returned which will be displayed in the same popup.

So basically we are just overriding the content of the popup using ajax.