Sponsored Advertisement

Blueimp Jquery File Upload Plugin with Jersey

In my File Upload Download with Jersey Demo App on GitHub you'll find a demo of the Blueimp jQuery File Upload Plugin. We'll work through the issues of integrating Blueimp File Upload with Jersey in this post. Complete source code is on GitHub with additional screenshots in this NixMash post.

I always liked this plugin. If you want to read how I used it in Spring Boot you'll find the details in this NixMash post from 2016. Whether or not you're interested in Spring Boot, you might want to skim through that post for details in working with Blueimp that may not be covered here. Below is the Blueimp Upload page in the Jersey Demo App.

The Controller Upload Handler

We'll jump straight to the source code for handling multiple file uploads with the Blueimp Plugin. It is very similar to handling multiple uploads as we covered in a previous NixMash post, but with more attention to Blueimp's needs.

We've folded source blocks of the three primary processes. 1) Upload the file, 2) Create a Thumbnail for display on page return, and 3) Create a PostImage object containing the filename, file size, thumbnail name and size, and various Urls to Display or Delete the File with BlueImp. One more important matter is that we want to return those PostImage objects in a Map<String, Object>. We'll see why next.

Displaying the File Details on Return

When we return to the page we display the newly uploaded image thumbnails and information about the files. We'll do that with a BlueImp JavaScript Template. This is where our Map<String, Object> of PostImages comes into play, where we populate file.url, file.name, etc. Here's an excerpt of the JavaScript Template.

To display thumbnails or images, or remove a file from the list, we need corresponding handlers in our Upload Controller. 

Here's what the Thumbnail Display handler looks like where we retrieve the file from MySQL (we need to store the PostImage data), then return a Javax ServletOutputStream.

With the Blueimp file handlers in place we can delete the file from the list, display the thumbnail, view file details, and use the Blueimp Lightbox image display plugin when clicking on any thumbnail as shown below.

Source Code Notes for this Post

Source code discussed in this post is found in my File Upload Download in Bootique Jersey Demo app on GitHub.

More Like This Post