Sunday, July 8, 2012

Email with Attachments via Spring and SendGrid (Part 4)


In the previous section, we have declared and written the necessary configuration files. In this section, we will write the HTML form and JavaScript code for composing and sending emails with attachments.


To achieve a seamless AJAX-like file upload experience, we will rely on blueimp's jQuery plugin jQuery-File-Upload for managing attachments.

What is jQuery-File-Upload?

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.


To view a demo of this plugin, please visit the following resources:

For our purposes, we will follow the minimal setup guide, so that we can create our custom UI and eliminate extraneous steps.

Make sure to test the plugin on different browsers because some browsers behave in unexpected ways. In my opinion, Chrome and Firefox are the best browsers for development.

Email Form

Here's our email form again:

And here's the full source:


Let's dissect and examine this lengthy source code. We're basically declaring the following:

  • Endpoint Urls
  • Import Scripts
  • Initialization Function
  • File Display Function
  • File List Function
  • Dialog Function
  • Clear Function

Endpoint Urls
We've declared two global urls: sendUrl and uploadUrl. These are the endpoints for sending messages and uploading files respectively.

Import Scripts
Based on the jQuery-File-Upload basic plugin guide, we need to import the following scripts: jquery.ui.widget.js, jquery.iframe-transport.js, and jquery.fileupload.js. The util.js contains a method for posting JSON objects. The remaining scripts are for the jQuery framework itself.

Initialization Function
This function contains the following initialization steps:
  • Beautify buttons
  • Attach submit function
  • Attach clear function
  • Attach file upload function
  • Initialize filelist data

File Display Function
This is used for formatting filenames. The output is similar to the following: filename (256.50K)

File List Function
This is used to retrieved the list of filenames. The output is comma-delimited, which is similar to the following: filename1.jpg,filename2.doc,filename3.txt

Dialog Function
This is a helper function for displaying dialog boxes.

Clear Function
This clears the form of its contents.

This is the form itself. Notice we've set the file input's opacity to zero to hide it and make it work under Safari and Opera (try removing the opacity and hide the file input via display:none to see an unwanted effect).

By setting the file input's opacity to 0, we have successfully hidden the input. But how do we access it now? Notice the "Add a file" link? We've attached a click trigger function on that link to fire up the file input. If we removed the opacity, here's what we will see:

Chrome 19.0.1084.56

Firefox 9.0.1

Internet Explorer 9.0.8112.16421

Browser Bugs

Even though the jQuery-File-Upload plugin has great cross-browser support, some browsers still behave erratically. Here's what I've discovered so far:

Internet Explorer 9.0.8112.16421
  • Does not upload file
  • Does not upload message

Opera 11.60
  • Attach link does not work if file input has display:none
  • To make it work, set the opacity instead

Safari 5.1.2
  • Attach link does not work if file input has display:none
  • To make it work, set the opacity instead


We have just written and discussed the Html form for sending emails with attachments. In the next section, we will build and run the application using Maven, and show how to import the project in Eclipse. Click here to proceed.
StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Email with Attachments via Spring and SendGrid (Part 4) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share