Profile Image Uploads: Intro

User Profile Image Uploading is now supported in our NixMash Spring app. This is an ordinary little function to be sure, but there are a number of interesting aspects behind the scenes which we’re going to cover over several posts. This post will serve as an introduction and summary of how the Profile Image Upload feature is designed. Other posts will cover 1) Spring File Uploading, 2) Thymeleaf Tricks, and 3) Sharing physical file storage across development and staging web sites.

We’ll start with a screenshot of the Profile Image Update page which is on the demo site if you want to create an account and play with it. The “Update Profile Pic” button displays the File Upload form at bottom right, with the options to “Upload” a new image, “Remove” the profile image and use the site default image, and “Cancel” which hides the upload form.

Images are uploaded to a location set in a Spring External Properties file. If you recall, NixMash Spring is a Fat War with embedded Tomcat services. To handle File Uploads we created a /files area on a physical website for NixMash Spring that we are not redirecting in our Apache Proxy configuration. The site Apache .conf file below redirects to the Fat War port 8086 for the application but retrieves /files content from its physical location. We create the /files Alias (1) and go directly to it without a proxy (2).

For best image quality and minimum file size we’re processing the image on upload by saving a 600×600 image for larger purposes and a 32×32 sized image for the navigation bar. We created a new 16-digit alphanumeric UserKey property to identify our user profile image filename, with the avatars and thumbnails stored in separate directories. You can see how small the thumbnails are, all less than 3KB.

Okay, that will get us started. Next we’ll get into the Spring and Java code supporting File Uploads.

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.