Now that everything works separately, it's time to assemble everything. We will do this in three steps:
- Move the upload form to the profile page and remove the old upload page.
- Change the submit button on the profile page to trigger the taste search directly.
- Change the home page of our application. It should display search results matching our users' tastes right away. If they are unavailable, go to the profile page.
I encourage you to try to do it on your own. You will run into very manageable problems along the way but you should know enough to resolve them on your own. I believe in you.
OK, now that you have done the work (you have, haven't you?), let's take a look at my solution.
The first step is to remove the old uploadPage title. Don't look back, just do it.
Next, put these lines just below the profilePage title:
<div class="row">
<div class="col m8 s12 offset-m2">
<img th:src="@{/uploadedPicture}" width="100" height="100"/>
</div>
<div class="col s12 center red-text" th:text="${error}" th:if="${error}">
Error during upload
</div>
<form th:action="@{/profile}" method="post" enctype="multipart/form-data" class="col m8 s12 offset-m2">
<div class="input-field col s6">
<input type="file" id="file" name="file"/>
</div>
<div class="col s6 center">
<button class="btn indigo waves-effect waves-light" type="submit" name="upload" th:text="#{upload}">Upload
<i class="mdi-content-send right"></i>
</button>
</div>
</form>
</div>It is very similar to the content of the late uploadPage. We just removed the title and changed the label of the submit button. Add the corresponding translation to the bundles.
In English:
upload=Upload
In French:
Upload=Envoyer
We also changed the name of the submit button to upload. That will help us identify this action on the controller side.
Now, if we try to upload our picture, it will redirect us to the old upload page. We need to fix this in the onUpload method of our PictureUploadController class:
@RequestMapping(value = "/profile", params = {"upload"}, method = RequestMethod.POST) public String onUpload(@RequestParam MultipartFile file, RedirectAttributes redirectAttrs) throws IOException { if (file.isEmpty() || !isImage(file)) { redirectAttrs.addFlashAttribute("error", "Incorrect file. Please upload a picture."); return "redirect:/profile"; } Resource picturePath = copyFileToPictures(file); userProfileSession.setPicturePath(picturePath); return "redirect:profile"; }
Note that we changed the URL that handles the post. It is now /profile instead of /upload. Form handling is much simpler when the GET and POST requests have the same URL, and will save us a lot of trouble especially when dealing with exceptions. This way, we will not have to redirect the user after an error.
We also removed the model attribute, picturePath. Since we now have a bean representing our user in a session, UserProfileSession, we decided to add it there. We added a picturePath attribute to the UserProfileSession class and the associated getters and setters.
Don't forget to inject the UserProfileSession class and make it available as a field in our PictureUploadController class.
Remember that all the properties of our session bean must be serializable, unlike resources. So we need to store it differently. The URL class seems to be a good fit. It is serializable and it is easy to create a resource from a URL with the UrlResource class:
@Component
@Scope(value = "session", proxyMode = ScopedProxyMode.TARGET_CLASS)
public class UserProfileSession implements Serializable {
private URL picturePath;
public void setPicturePath(Resource picturePath) throws IOException {
this.picturePath = picturePath.getURL();
}
public Resource getPicturePath() {
return picturePath == null ? null : new UrlResource(picturePath);
}
}The last thing that I had to do is to make the profileForm available as a model attribute after an error. This is because the profilePage requires it when it is rendered.
To sum up, here is the final version of the PictureUploadController class:
package masterSpringMvc.profile;
import masterSpringMvc.config.PictureUploadProperties;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.core.io.FileSystemResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLConnection;
import java.util.Locale;
@Controller
public class PictureUploadController {
private final Resource picturesDir;
private final Resource anonymousPicture;
private final MessageSource messageSource;
private final UserProfileSession userProfileSession;
@Autowired
public PictureUploadController(PictureUploadProperties uploadProperties,
MessageSource messageSource,
UserProfileSession userProfileSession) {
picturesDir = uploadProperties.getUploadPath();
anonymousPicture = uploadProperties.getAnonymousPicture();
this.messageSource = messageSource;
this.userProfileSession = userProfileSession;
}
@RequestMapping(value = "/uploadedPicture")
public void getUploadedPicture(HttpServletResponse response) throws IOException {
Resource picturePath = userProfileSession.getPicturePath();
if (picturePath == null) {
picturePath = anonymousPicture;
}
response.setHeader("Content-Type", URLConnection.guessContentTypeFromName(picturePath.getFilename()));
IOUtils.copy(picturePath.getInputStream(), response.getOutputStream());
}
@RequestMapping(value = "/profile", params = {"upload"}, method = RequestMethod.POST)
public String onUpload(@RequestParam MultipartFile file, RedirectAttributes redirectAttrs) throws IOException {
if (file.isEmpty() || !isImage(file)) {
redirectAttrs.addFlashAttribute("error", "Incorrect file. Please upload a picture.");
return "redirect:/profile";
}
Resource picturePath = copyFileToPictures(file);
userProfileSession.setPicturePath(picturePath);
return "redirect:profile";
}
private Resource copyFileToPictures(MultipartFile file) throws IOException {
String fileExtension = getFileExtension(file.getOriginalFilename());
File tempFile = File.createTempFile("pic", fileExtension, picturesDir.getFile());
try (InputStream in = file.getInputStream();
OutputStream out = new FileOutputStream(tempFile)) {
IOUtils.copy(in, out);
}
return new FileSystemResource(tempFile);
}
@ExceptionHandler(IOException.class)
public ModelAndView handleIOException(Locale locale) {
ModelAndView modelAndView = new ModelAndView("profile/profilePage");
modelAndView.addObject("error", messageSource.getMessage("upload.io.exception", null, locale));
modelAndView.addObject("profileForm", userProfileSession.toForm());
return modelAndView;
}
@RequestMapping("uploadError")
public ModelAndView onUploadError(Locale locale) {
ModelAndView modelAndView = new ModelAndView("profile/profilePage");
modelAndView.addObject("error", messageSource.getMessage("upload.file.too.big", null, locale));
modelAndView.addObject("profileForm", userProfileSession.toForm());
return modelAndView;
}
private boolean isImage(MultipartFile file) {
return file.getContentType().startsWith("image");
}
private static String getFileExtension(String name) {
return name.substring(name.lastIndexOf("."));
}
}So, now we can go to the profile page and upload our picture as well as provide personal information, as shown in the following screenshot:
Now, let's redirect our user to its search after the profile is completed. For this, we need to modify the saveProfile method in the ProfileController class:
@RequestMapping(value = "/profile", params = {"save"}, method = RequestMethod.POST)
public String saveProfile(@Valid ProfileForm profileForm, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
return "profile/profilePage";
}
userProfileSession.saveForm(profileForm);
return "redirect:/search/mixed;keywords=" + String.join(",", profileForm.getTastes());
}Now that we are able to search for tweets from our profile, we don't need the searchPage or TweetController we previously made. Simply delete the searchPage.html page and the TweetController.
To finish, we can modify our home page so that it redirects us to a search matching our tastes if we have already completed our profile.
Let's create a new controller in the controller package. It is responsible for redirecting a user arriving at the root of our website either to their profile if it's incomplete or to the resultPage if their tastes are available:
package masterSpringMvc.controller;
import masterSpringMvc.profile.UserProfileSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
public class HomeController {
private UserProfileSession userProfileSession;
@Autowired
public HomeController(UserProfileSession userProfileSession) {
this.userProfileSession = userProfileSession;
}
@RequestMapping("/")
public String home() {
List<String> tastes = userProfileSession.getTastes();
if (tastes.isEmpty()) {
return "redirect:/profile";
}
return "redirect:/search/mixed;keywords=" + String.join(",", tastes);
}
}