Review

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.

Part 1: Introduction and Functional Specs
Part 2: Java classes
Part 3: XML configuration
Part 4: HTML form
Part 5: Running the Application

jQuery-File-Upload

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.

Source: https://github.com/blueimp/jQuery-File-Upload

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.

Warning!
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:

Explanation

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.

Form
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.

Share the joy: