Profile Image Uploads: Thymeleaf Tricks

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.

Checking for Demo User in JavaScript with Thymeleaf

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.

With Inline Thymeleaf in JavaScript we can easily check on the Spring CurrentUser object properties as well as display a Spring response.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.