We Keep Coding

How do I POST a file to my backend, using Thymeleaf with Spring's #ModelAttribute?

Using #ModelAttribute I am able to post form-data to my backend without issue, however when I try to include a multipart file the server returns a 500 error. There are no console warnings or stack traces thrown, and the POST request endpoint is never hit according to my debugger.
I've tried working backwards, and replacing the MultiPartFile with just a String and changing the file attribute in the HTML to text, and it works just find sending Strings and ints to the back end, but when I add the file type back in and switch the model to MultipartFile, it breaks...
The html form fragment, the submit button triggers the POST request to /new:
<form method="POST" enctype="multipart/form-data" th:action="#{/release/new}" class="mx-auto w-50" th:object="${package}">
<th:block th:include="fragment/error-message.html"></th:block>
<fieldset>
<legend>Release Package Information</legend>
<div class="row">
<div class="col-sm-6 mb-3">
<label>Release Package ID</label>
<input type="text" class="form-control" placeholder="Enter the release package ID" th:field="*{releasePackageId}">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<label>Nomenclature</label>
<input type="text" class="form-control" placeholder="Enter the part nomenclature" th:field="*{nomenclature}">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<label>File</label>
<input type="file" class="form-control" placeholder="Select the part to upload" th:field="*{file}">
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-6">
<a th:href="#{/release}" class="btn btn-outline-secondary w-100">
Back
</a>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn-outline-success w-100">
Submit
</button>
</div>
</div>
</form>
And here are the controller endpoints for /release/new:
#GetMapping("/new")
public ModelAndView showCreateReleasePackageForm()
{
return new ModelAndView("new-release").addObject("package", new CreateReleasePackageDTO());
}
#PostMapping("/new")
public String createReleasePackage(#ModelAttribute("package") CreateReleasePackageDTO releasePackageDTO, BindingResult result, RedirectAttributes attributes)
{
if (result.hasErrors())
{
return "new-release";
}
String response = "a response";
System.out.println(releasePackageDTO.getReleasePackageId() + releasePackageDTO.getNomenclature() + releasePackageDTO.getFile());
// TODO: Exception handling
// try
// {
// response = this.fileService.save(ReleasePackageMapper.toEntity(releasePackageDTO));
// } catch (JsonProcessingException e)
// {
// response = e.getMessage();
// e.printStackTrace();
// }
attributes.addFlashAttribute("message", response);
return "redirect:/release";
}
Here is the DTO, the model object I am calling "package":
#Getter
#Setter
public class CreateReleasePackageDTO
{
#NotNull(message = "{NotNull.releasePackageId}")
private int releasePackageId;
#NotEmpty(message = "{NotEmpty.nomenclature}")
private String nomenclature;
#NotEmpty(message = "{NotEmpty.multipartFile}")
private MultipartFile file;
}

Cannot get value from simple form user input in Spring boot application?

I'm trying to implement a login form in a Spring boot application. It has an email and a password field. The email field failed to get user input, here is the form:
<form th:action="#{/login}" method="get" th:object="${loginForm}" style="max-width: 600px; margin: 0 auto;">
<div class="m-3">
<div class="form-group row">
<label class="col-4 col-form-label">E-mail: </label>
<div class="col-8">
<input type="text" th:field="*{email}" name="q" class="form-control" required />
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label">Password: </label>
<div class="col-8">
<input type="password" th:field="*{password}" class="form-control" required/>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
</form>
Here is the controller:
#GetMapping("login")
public ModelAndView login(Model model, #RequestParam(name = "q", required = false) Optional<String> email) {
Optional<UserDto> aUser;
System.out.println(email);
if (email.isPresent()) {
aUser = userService.getAUserByEmail(email.get());
model.addAttribute("user", aUser);
var mv = new ModelAndView("user/user-list", model.asMap());
return mv;
} else {
model.addAttribute("loginForm", new LoginForm());
return new ModelAndView("/login/login-form", model.asMap());
}
}
I thought the #RequestParam(name = "q") and name="q" in html would do the job, but I always get Optional.empty for email. Any idea what's wrong here?
UPDATE:
From the answers I changed controller to this:
#GetMapping("login")
public ModelAndView login(Model model, LoginForm loginForm) {
Optional<UserDto> aUser;
if (loginForm.getEmail() != null) {
aUser = userService.getAUserByEmail(loginForm.getEmail());
model.addAttribute("user", aUser);
var mv = new ModelAndView("user/user-list", model.asMap());
return mv;
} else {
model.addAttribute("loginForm", new LoginForm());
return new ModelAndView("/login/login-form", model.asMap());
}
}
login-form.html to this:
<form th:action="#{/login}" method="get" th:object="${loginForm}" style="max-width: 600px; margin: 0 auto;">
<div class="m-3">
<div class="form-group row">
<label class="col-4 col-form-label">E-mail: </label>
<div class="col-8">
<input type="text" th:field="*{email}" class="form-control" required />
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label">Password: </label>
<div class="col-8">
<input type="password" th:field="*{password}" class="form-control" required/>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
</form>
I also have LoginForm.java like this
#Data
#AllArgsConstructor
#NoArgsConstructor
public class LoginForm {
private String email;
private String password;
}
but still not getting user email field input?

The way you have set up your form, it's mapping the value of your email input field to the property email (that's what th:field="*{email}" means) of an object called loginForm (that's what th:object="${loginForm}" means). Neither of these seem to be used or even exist in your login() method. You need to either change what you use in your controller to match what you have in your Thymeleaf template, or change your Thymeleaf template to actually reference what you are using in your controller.

The problem in your code is located under th:object="${loginForm}"
With this you inform spring to bind the data sent from the form into an object named loginForm.
So Spring actually expects the controller to be
#GetMapping("login")
public ModelAndView login(Model model, LoginForm loginForm) {
....
and inside LoginForm a field named email will contain the value sent from the form, as you have declared with <input type="text" th:field="*{email}" .... >
If you don't want the data to be bound into an object from Spring Mvc then
remove the th:object="${loginForm}"
use the
<input type="text" th:name="q" class="form-control" required />
and then the controller will receive the sent value as a query parameter
#GetMapping("login")
public ModelAndView login(Model model, #RequestParam(name =
"q", required = false) Optional<String> email) {

Spring MVC Login Form

I have created a simple login form that will redirect to the next page after submitting the form credentials. But it's not working fine.
here is my code:
Controller class:
#RequestMapping("/home")
public String showForm() {
return "home";
}
#RequestMapping(path = "/handleForm", method = RequestMethod.POST)
public String handleForm(HttpServletRequest request) {
String name = request.getParameter("username");
String pass = request.getParameter("password");
if (name != null && pass != null) {
if (name.equals("Twinkle") && pass.equals("twinkle123")) {
return "student-list";
} else {
return "home";
}
} else {
return "error";
}
}
home jsp file:
<div class="container mt-5">
<h3 class="text-center">Welcome, Login Here</h3>
<form action="handleForm" method="POST">
<div class="form-group">
<label for="username">User Name</label>
<input type="text" class="form-control"
id="username"
placeholder="Enter here"
name="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" minlength="4"
maxlength="8" placeholder="Enter here" name="password">
</div>
<div class="container mt-5 text-center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
How to fix it?

Why I am not able to insert and update?

<%#include file="../header.jsp" %>
<h1>Add Room</h1>
<form action="save" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Room Type</label>
<input type="text" name="roomType" placeholder="Enter Room Type" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Description</label>
<input type="text" name="roomDescription" placeholder="Enter Room Description" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Number</label>
<input type="number" name="roomNumber" placeholder="Enter Room Number" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Image</label>
<input type="file" name="file" placeholder="Select Room Image" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Image</label>
<input type="hidden" name="ro_id" value="${Room.ro_id}" placeholder="Select Room Image" required="required" class="form-control"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Save</button>
</div>
</form>
<%#include file="../footer.jsp" %>
Here is my edit jsp from where I update my database
Edit Room Jsp for updating for database using Room controller and I get
"Column Image"cannot be null
<%#include file="../header.jsp" %>
<h1>Edit Room</h1>
<form action="${SITE_URL}/admin/room/save" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Room Type</label>
<input type="text" name="roomType" value="${Room.room_type}" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Description</label>
<input type="text" name="roomDescription" value="${Room.room_description}" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Number</label>
<input type="number" name="roomNumber" value="${Room.room_number}" required="required" class="form-control"/>
</div>
<div class="form-group">
<label>Room Image</label>
<input type="file" name="file" link src="D:/Hotels/uploadedImage/${Room.image}" required="required" class="form-control" />
</div>
<form:hidden path="${Room.ro_id}" />
<input type="text" value="${Room.ro_id}" name="id"/>
<div class="form-group">
<button type="submit" class="btn btn-success" value="editroom/ro_id" >Save</button>
</div>
</form>
<%#include file="../footer.jsp" %>
When I try to update the page i get Column"image" cannot be null
and when I try to add it "Required int parameter #id is not present
/**
*
* #author
*/
#Controller
#RequestMapping(value = "/admin/room")
public class Roomcontroller {
#Autowired
private RoomService roomService;
#RequestMapping(method = RequestMethod.GET)
public String index(ModelMap map) throws SQLException {
map.addAttribute("Room", roomService.getAll());
return "admin/room/index";
}
#RequestMapping(value = "/addroom", method = RequestMethod.GET)
public String addRoom() throws SQLException {
return "admin/room/addroom";
}
#RequestMapping( value = "/editroom/{ro_id}", method = RequestMethod.GET )
public #ResponseBody ModelAndView edit(#PathVariable("ro_id") int ro_id) throws SQLException {
ModelAndView mv = new ModelAndView("admin/room/editroom");
mv.addObject("Room", roomService.getById(ro_id));
return mv;
}
#RequestMapping(value = "/deleteroom/{ro_id}", method = RequestMethod.GET)
public String delete(#PathVariable("ro_id") int ro_id) throws SQLException {
roomService.delete(ro_id);
return "redirect:/admin/room";
}
#RequestMapping(value = "/save", method = RequestMethod.POST)
public String save(#RequestParam("roomType") String roomType,#RequestParam("id") int id,
#RequestParam("roomDescription") String roomDescription, #RequestParam("roomNumber") int roomNumber
,#RequestParam("file") MultipartFile multipartFile,HttpServletRequest req) throws SQLException, IOException {
Room attributes
Room room = new Room();
room.setRo_id(id);`
room.setRoom_type(roomType);
room.setRoom_description(roomDescription);
room.setRoom_number(roomNumber);
// TO DO : Save room, fetch the id of saved room and set it through
// setter in above object.
System.out.println(room.getRo_id());
if(room.getRo_id()==0){
System.out.println(room.getRo_id());
String serverRootPath = req.getServletContext().getRealPath("");
System.out.println(serverRootPath);
// You can change the directory.
File roomImageDirectory = new File("D:\\Hotels\\uploadedImages");
if (!roomImageDirectory.exists()) {
roomImageDirectory.mkdirs();
}
String[] fileNameToken = multipartFile.getOriginalFilename().split("\\.");
// You can change file name to be saved.
String newFileName = "room-" + room.getRoom_number() + "." + fileNameToken[fileNameToken.length - 1];
File roomImage = new File(roomImageDirectory, "/" + newFileName);
roomImage.createNewFile();
multipartFile.transferTo(roomImage);
room.setImage(newFileName);
roomService.insert(room);
}
else
{
roomService.update(room);
}
return "redirect:/admin/room";
}
}

Edit action returns null

I'm new to Struts2 framework and I found a problem when I try to edit an object.
The code of my modification action:
#Action(value = "modifyServer", results = {
#Result(name = "success", location = Location.MAIN_PAGE),
#Result(name = "error", location = Location.LOGIN_PAGE) })
public String modifyServer() {
em = DbConnexion.getEntityManager().createEntityManager();
String id=request.getParameter(sssid);
logger.info("id serveur = "+request.getParameter("id"));
try {
em.getTransaction().begin();
Simserver server = em.find(Simserver.class, id);
server.setSssServer(request.getParameter("sssServer"));
server.setSssIp(request.getParameter("sssIp"));
server.setSssPort(request.getParameter("sssPort"));
em.getTransaction().commit();
System.out.println("modification done !!!");
em.close();
return SUCCESS;
} catch (Exception e) {
return ERROR;
}
}
The JSP:
<form class="form-horizontal" action="modifyServer" role="form"
name="form_message" method="get">
<div id="elmsg"></div>
<div class="panel panel-info">
<div class="panel-heading expand" id="second-level">
<h6 class="panel-title">Modification du Serveur</h6>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label"> Id du Serveur : <span
class="mandatory">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sssId"
disabled="disabled" id="sssId"
value="<s:property value="#request.curentserver.sssId" />">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Nom du Serveur : <span
class="mandatory">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sssServer"
id="sssServer"
value="<s:property value="#request.curentserver.sssServer" />">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Adresse IP : <span
class="mandatory">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sssIp" id="sssIp"
value="<s:property value="#request.curentserver.sssIp" />" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Port : <span
class="mandatory">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sssPort" id="sssPort"
value="<s:property value="#request.curentserver.sssPort" />" />
</div>
</div>
<div class="form-actions text-right">
<button type="submit" value="Envoyer" class="btn btn-success"
>Modifier le serveur</button>
<a role="button" href="gestionServeurList" class="btn btn-danger">Retour
à la list des serveurs</a>
</div>
When I execute my action the request.getParameter returns null.
I think the issue is in the parameter!

There are issues with code:
In Java code you are trying to print a request parameter with name as "id" instead of "sssId".
Also you are trying to use a variable called "sssid" that is no where defined in your question.
String id=request.getParameter(sssid);
logger.info("id serveur = "+request.getParameter("id"));
In JSP the sssId element is disabled, when you submit a form the disabled elements are ignored.
<input type="text" class="form-control"
name="sssId" disabled="disabled" id="sssId"
value="<s:property value="#request.curentserver.sssId" />">
So to get its value, create a hidden element in your jsp and on form submission update the hidden element with the required value using JavaScript.
<input type="hidden" name="sssId" value=""/>
In Javascript it will be like:
document.getElementById("sssId").value = 123; // Give value here
document.getElementById("myForm").submit(); // Give an Id to your form, say "myForm"
Finally the Action code looks like this :
public class MyAction extends ActionSupport implements ServletRequestAware {
#Action(value = "modifyServer", results = {
#Result(name = "success", location = Location.MAIN_PAGE),
#Result(name = "error", location = Location.LOGIN_PAGE) })
public String modifyServer() {
String id = request.getParameter("sssId");
System.out.println("id serveur = " + id);
return null;
}
private HttpServletRequest request;
#Override
public void setServletRequest(HttpServletRequest request) {
this.request = request;
}
}

If the input element has disabled="disabled" attribute it won't include as parameter when your form is submitted. Also rename the input element name that correspond to a parameter name. Struts2 getter/setter can be used to populate the action bean.
public void setSssId(String id){
this.id = id;
}

I'd suggest checking value of sssId being passed to the action through javascript.
<button onclick='javascript:submitMyForm();' type="button" value="Envoyer" class="btn btn-success"
>Modifier le serveur</button>
write the following javascript
function submitMyForm(){
var sssIdElement = document.getElementById("sssId");
document.form_message.action = "modifyServer.action?sssId="+sssIdElement;
document.form_message.submit();
}