Form and process file and String data at the same time with Spring Boot + Java

Now that I know how to send a Form and a String type at the same time, I will leave it as a memorandum.

Image of what you want to achieve

There is a form like this, and when you click the submit button, the page is updated with the updated information and an alert is displayed

<form th:action="@{/portfolio/user/modify}" method="post" enctype="multipart/form-data">
          <table class="table table-hover table-bordered table-responsive-md text-center" th:object="${user}">
            <tr>
              <th scope="row" class="img-column">Profile Picture</th>
              <td style="position: relative;">
                <img th:src="${'data:image/png;base64,'+image}"
                  th:class="${user.getUserImg().length == 0 ? 'hidden' : 'mypage-img'}">
                <img src="/img/avator.png " alt="" th:class="${user.getUserImg().length == 0 ? 'mypage-img' : 'hidden'}">
                <label id="file-btn" for="userImg" class="bg-primary text-white">Choose your photo</label>
                <input type="file" name="file" id="userImg" style="display: none;">
                <p id="selected-status" class="mt-1">[Not yet selcted]</p>
              </td>
            </tr>
            <!--Of String<input>Is omitted-->
            <button id="cancel-btn" class="btn btn-warning hidden" type="button">Cancel</button>
            <button id="submit-btn" class="btn btn-primary hidden" type="submit">Submit</button>
          </div>
        </form>

// @Controller
@PostMapping(value = "/modify", consumes = { "multipart/form-data" }) //Point 1: 「consumes = { "multipart/form-data" }Added
  public String modify(UserForm userForm, @RequestPart("file") MultipartFile file, Model m) { //Point 2: 「@Added "Request Part" *@Not RequestParam
    userService.update(userForm, file, loginSession.getUserId());
    User user = userService.findByUserId(loginSession.getUserId());
    userService.setLoginSession(user);
    m.addAttribute("user", user);
    Boolean completeMsg = true;
    m.addAttribute("completeMsg", completeMsg);
    return "mypage";
  }

 // @Service
  public User findByUserNameAndPassword(String userName, String password) {
    return userRepos.findByUserNameAndPassword(userName, password);
  }
  //Overwrite user table
  public int update(UserForm userForm, MultipartFile file, Integer userId) {
    String userName = userForm.getUserName();
    String familyName = userForm.getFamilyName();
    String firstName = userForm.getFirstName();
    String email = userForm.getEmail();
    String password = userForm.getPassword();
    String imgPath = "/img/user/" + file.getOriginalFilename();
    return userRepos.update(userName, familyName, firstName, email, password, imgPath, userId);
  }

 /*Initialization of correction completion dialog*/
      var dialog = bootbox.dialog({
        message: '<p class="text-center mb-0">Your profile picture has changed</p>',
        backdrop: true,
        centerVertical: true,
        show: false
      });

      /*Alert display after updating user information*/
      const completeMsg = /*[[${completeMsg}]]*/ ''; //Point 3:Display an alert using the one passed to Create an instance of Boolean during the user information update process.
      console.log("completeMsg : " + completeMsg);
      if (completeMsg) {
        dialog.modal('show');
      }