This is the third post in our series on adding a Profile Image Uploading feature to NixMash Spring. In this post we’ll look at some of the cool things Thymeleaf added to the mix. The Series Intro post describing the feature is here, the post focusing on the behind-the-scenes Spring elements can be found here.
Here’s a screenshot of the Upload form with a fadeout Feedback Message after an image update. I blogged about using a fadeout Feedback Message with Spring MVC here.
Checking for Errors When Displaying the Upload Form
The Upload Form is displayed when the user clicks the “Update Profile Pic” button. The form closes after an image is updated or when the “Cancel” button is clicked.
The form is set as display:hidden when the page is loaded, but what happens when our Spring Validation check sends back a Form Field Error, like when the size of the image is too large. With a simple display:hidden setting, the form would be closed on postback for both successful and unsuccessful upload attempts and the user would never see the Spring Error message.
Using Thymeleaf we’re going to display the form area on postback even though it is normally set to display:hidden. We use a ternary option for displaying the style based on whether or not any GlobalErrors() are present.
On the NixMash Spring Demo Site I thought it would probably be best to require users to create a new account to test Profile Image Uploads and prevent changes to the Demo User named “User.” So when someone logs in with the demo “User” account we’ll display a Bootstrap Dialog Box when they click on the “Update Profile Pic” button.