Как загрузить изображение и сохранить его имя в базе данных, используя Spring Boot и Thymeleaf?

Question

Я использую Spring Boot и Thymeleaf в своем приложении

Я хочу сохранить форму со всеми полями в базе данных (Postgresql) при нажатии на кнопку отправки. Что касается изображений, я хочу сохранить имена изображений в виде строк в базе данных для будущего использования, например для извлечения изображения по его имени.

У меня есть два ввода в форме: один для изображений jpeg или jpg и один для изображений gif.

Проблема в том, что я получаю ошибку от thymeleaf:

DefaultHandlerExceptionResolver: Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: необходимая часть запроса 'imageFile' отсутствует]

Как правильно загрузить изображения в папку и сохранить их имена в базе данных?

HTML форма:

<form action="#" th:action="@{/admin/sketches/add}" th:object="${sketch}" method="post" id="save-sketch" enctype="multipart/form-data">
        <div class="add-sketch">
            <div class="title">
                <div class="title-text">
                    <p>Title
                        <span th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="error"></span>
                    </p>
                    <input type="text" class="title-input" th:field="*{title}" id="title">
                </div>
                <div class="title-file">
                    <label for="file-input">
                        <img th:src="@{/images/add image.png}" alt="upload image">
                    </label>
                    <input id="file-input" type="file" th:field="*{image}" name="imageFile" accept="image/x-png,image/gif,image/jpeg" />
                </div>
                <span id="image-text">No file chosen, yet</span>
            </div>

            <!--SKETCH TEXT====================================-->
            <div class="sketch-text">
                <p>Sketch Text
                    <span th:if="${#fields.hasErrors('text')}" th:errors="*{text}" class="error"></span>
                </p>
                <textarea name="sketch-area" id="" cols="55" rows="6" th:field="*{text}"></textarea>
            </div>

            <!--DROPDOWN-->
            <div class="select">
                <select name="select-category" id="select-category" th:field="*{category}">
                    <option value="Buttons">Buttons</option>
                    <option value="Potentiometers">Potentiometers</option>
                    <option value="Encoders">Encoders</option>
                    <option value="Leds">Leds</option>
                </select>
            </div>

            <span th:if="${#fields.hasErrors('category')}" th:errors="*{category}" class="error"></span>

            <!--ADD GIF=====================================-->
            <input type="file" id="gif-file" hidden="hidden" th:field="*{gif}" name="gif" accept="image/x-png,image/gif,image/jpeg" >
            <button type="button" id="gif-button">Add GIF<i class="fas fa-image"></i></button>
            <span id="gif-text">No file chosen, yet</span>

            <div class="save-sketch">
                <input type="submit" class="save-sketch-button" id="button-save" value="Save Sketch"/>
            </div>

        </div>
    </form>

Post Method В контроллере:

private final String UPLOAD_FOLDER = "src/main/resources/uploads/";

public AdminController(SketchRepository sketchRepository) {
    this.sketchRepository = sketchRepository;
}

@PostMapping("/sketches/add")
    public String addSketch(
                            @Valid Sketch sketch,
                            BindingResult result,
                            @RequestParam MultipartFile imageFile,
                            @RequestParam MultipartFile gifFile,
                            RedirectAttributes redirectAttributes) throws IOException {


        redirectAttributes.addFlashAttribute("action", "save");
        if (result.hasErrors()) {
            return "admin/add-sketch";
        }
        String imageExtension = "";
        String imageName = sketch.getImage();
        String gifName = sketch.getGif();

        //get imageExtension from chosen image
        int i = imageName.lastIndexOf('.');
        if (i > 0) {
            imageExtension = imageName.substring(i+1);
        }

        imageName = sketch.getTitle() + "." + imageExtension;
        gifName = sketch.getTitle() + ".gif";

        Path imageNameAndPath = Paths.get(UPLOAD_FOLDER, imageName);
        Path gifNameAndPath = Paths.get(UPLOAD_FOLDER, gifName);

        if (sketch.getGif() == null || sketch.getGif().isEmpty()) {
            sketch.setGif(null);
        } else {
            sketch.setGif(gifName);
        }

        sketch.setImage(imageName);
        sketchRepository.save(sketch);
        try {
            Files.write(imageNameAndPath, imageFile.getBytes());
            Files.write(gifNameAndPath, gifFile.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "redirect:/admin/sketches/add";
    }

Файл Application.properties:

spring.servlet.multipart.enabled=true

# Max file size.
spring.servlet.multipart.max-file-size=200MB
# Max Request Size
spring.servlet.multipart.max-request-size=215MB