Spring MVC, Thymeleaf, and the BlueImp FileUpload Plugin

I starred the BlueImp JQuery File Upload Plugin app a while ago, hoping to use it on NixMash Spring some day. If you're not familiar with it go to the plugin's demo page and give it a whirl. I think you'll enjoy its functionality for uploading multiple files.

Now we're enjoying it in NixMash Spring when creating the new MultiPhoto Posts you'll hear more about soon. Here's what uploading multiple images looks like on the Post Edit page.

Spring MVC

If you go to the BlueImp File Upload Wiki you'll notice a number of implementations in PHP, Python, and other languages including Java. There are a couple of Spring MVC implementations on the list you can look at, the best being J. David Mendoza's FileUpload sample application.

Much of the logic in our implementation was based on David's work, but rather than using Hibernate In-Session processing we're saving to MySQL and are integrating the upload images with Post parent objects. We're also using Thymeleaf instead of JSP, which we'll look at later.

Below is the layout of our Image Upload Controller.  The first /photos method loads the page. Nothing to see there. The action starts at (1) where the BlueImp main.js function retrieves the files for that Post by postId referenced here as parentId. (2) This takes the MultiPart Files from the HttpRequest object on {POST} and saves them to file and MySQL. The remaining 3 methods at (3) perform various processes on the plugin image list we saw above.

Main.js

The FileUpload Plugin's main.js function sets the stage for us, where you'll see how it configures our plugin URL of /posts/photos/upload/{parentId}.

File and MySQL Storage

We're using a PostImage Model class to save the file data to our posts_images table and the image itself to a designated file storage location we set in a Spring External Properties file. For reasons I won't go into now we maintain a loose coupling between PostImages and Posts. There's no Hibernate @OneToMany relationship or foreign key between the two tables, so we populate the Post's Images when required…

…and display them in Thymeleaf when a post is the MULTIPHOTO_POST display type.

Thymeleaf and the Pesky Plugin

BlueImp FileUpload uses JavaScript Templating, which is very cool, but makes parsing the page in Thymeleaf impossible. We've covered the ability of Thymeleaf to parse JavaScript, CSS and other content types, where CDATA is employed to disable XML-escaping for that section. Unfortunately, the plugin won't work with CDATA sections in the JavaScript Template, and Thymeleaf will refuse to display the page if the CDATA tags are missing.

THE THYMELEAF SOLUTION: Velocity! After a lot of pain we decided to simply output the JavaScript Template code with Velocity as Spring MVC Model Attributes. First our template…

and after added as MVC Model attributes displayed on the page as Thymeleaf utext Strings.

It's great using the BlueImp FileUpload Plugin with Spring MVC and Thymeleaf. All of the integration coding was worth it. Check out the Plugin's demo page as I mentioned before. Because only users who can create posts will see file uploading in action on NixMash Spring we created a MultiFile Upload Demo Page anyone can use. Check that out as well.

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.

Posted August 04, 2016 03:48 PM EDT

More Like This Post