Wednesday, June 20, 2012

File Upload with Spring and jQuery (Part 1)

Introduction

In this article, we will study how to do file uploads with Spring and jQuery. We will learn how to attach multiple files and use the jQuery-File-Upload plugin to provide a seamless file upload experience.

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

Dependencies

Spring core 3.1.0.RELEASE
jQuery-File-Upload
See pom.xml for details

Github
To access the source code, please visit the project's Github repository (click here)

Functional Specs

Let's define our application's requirements:

Create a simple form where users can upload multiple files
Users should be able to add an owner name and description for each upload
Provide an AJAX-like experience

Here's our Use Case diagram:

[User]-(Add files)
[User]-(Upload)

File Upload Strategy
To achieve an AJAX-like experience we have to resort to a different strategy when uploading and sending form data. Instead of sending all form data in one go, we will upload the file separately (behind the scenes without user intervention).

Here are the steps:

User fills-in the form's text inputs, i.e owner and description
User clicks on "Add a file" link. Browsers for a file and attaches it
Behind the scene, the form uploads the file to the server. The server saves the file and returns the file details, i.e filename and file size
User clicks on "Upload" button. The form does a POST action to send the form data. But it never sends the file itself. Instead it sends the filename that was saved by the server. The user is tricked into thinking that the file hasn't been uploaded yet.

Screenshots

Let's preview how our application will look like after it has been completed. This is also a good way to clarify further our application's specs

This is the entry page where users can upload files. Users are allowed to attach multiple files.

Upload Form

When attaching multiple files, this is the expected output.

Multiple files attachment

This alert shows whenever files have been successfully uploaded.

Successful upload alert

This alerts shows whenever files have failed to be uploaded.

Form fields cleared alert

In the next section, we will start writing the Java classes. Click here to proceed.

Share the joy:

Subscribe by reader

Subscribe by email Share

File Upload with Spring and jQuery (Part 2)

Review

In the previous section, we have laid down the functional specs of the application. In this section, we will start writing the Java classes and discuss the project's structure.

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

Project Structure

Our application is a Maven project which means our project follows the Maven structure.

Here's a preview of our project's structure:

Domain Layer

The domain layer contains a Message class that is used as a container to hold file details.

Message.java

	package org.krams.domain;

	import java.io.Serializable;
	public class Message implements Serializable {

	private static final long serialVersionUID = -4093981756240899937L;
	private String owner;
	private String description;
	private String filename;

	public Message() {
	super();
	}

	public Message(String owner, String description, String filename) {
	super();
	this.owner = owner;
	this.description = description;
	this.filename = filename;
	}

	...getters/setters

	}

view raw Message.java hosted with ❤ by GitHub

The domain layer also contains an UploadedFile class which is used for sending file information after it has been processed by the controller.

UploadedFile.java

	package org.krams.domain;

	import java.io.Serializable;

	public class UploadedFile implements Serializable {

	private static final long serialVersionUID = -38331060124340967L;
	private String name;
	private Integer size;
	private String url;
	private String thumbnail_url;
	private String delete_url;
	private String delete_type;

	public UploadedFile() {
	super();
	}

	public UploadedFile(String name, Integer size, String url) {
	super();
	this.name = name;
	this.size = size;
	this.url = url;
	}

	public UploadedFile(String name, Integer size, String url,
	String thumbnail_url, String delete_url, String delete_type) {
	super();
	this.name = name;
	this.size = size;
	this.url = url;
	this.thumbnail_url = thumbnail_url;
	this.delete_url = delete_url;
	this.delete_type = delete_type;
	}

	...getters/setters

	}

view raw UploadedFile.java hosted with ❤ by GitHub

Controller Layer

The controller layer contains a simple controller that serves a form for uploading files. There are two important endpoints here:

/message - processes the file descriptions
/file - receives the files themselves

To simplify this tutorial, we're not persisting the messages and files in a database or to the disk.

UploadController.java

	package org.krams.controller;

	import java.util.ArrayList;
	import java.util.List;

	import org.apache.log4j.Logger;
	import org.krams.domain.Message;
	import org.krams.domain.UploadedFile;
	import org.krams.response.StatusResponse;
	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.RequestBody;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.bind.annotation.RequestMethod;
	import org.springframework.web.bind.annotation.RequestParam;
	import org.springframework.web.bind.annotation.ResponseBody;
	import org.springframework.web.multipart.MultipartFile;

	@Controller
	@RequestMapping("/upload")
	public class UploadController {

	private static Logger logger = Logger.getLogger("controller");

	@RequestMapping
	public String form() {
	return "form";
	}

	@RequestMapping(value="/message", method=RequestMethod.POST)
	public @ResponseBody StatusResponse message(@RequestBody Message message) {
	// Do custom steps here
	// i.e. Persist the message to the database
	logger.debug("Service processing...done");

	return new StatusResponse(true, "Message received");
	}

	@RequestMapping(value="/file", method=RequestMethod.POST)
	public @ResponseBody List<UploadedFile> upload(
	@RequestParam("file") MultipartFile file) {
	// Do custom steps here
	// i.e. Save the file to a temporary location or database
	logger.debug("Writing file to disk...done");

	List<UploadedFile> uploadedFiles = new ArrayList<UploadedFile>();
	UploadedFile u = new UploadedFile(file.getOriginalFilename(),
	Long.valueOf(file.getSize()).intValue(),
	"http://localhost:8080/spring-fileupload-tutorial/resources/"+file.getOriginalFilename());

	uploadedFiles.add(u);
	return uploadedFiles;
	}
	}

view raw UploadController.java hosted with ❤ by GitHub

Others

StatusResponse is used to determine the status of a request, and includes an error message if any.

StatusResponse.java

	package org.krams.response;

	import java.util.ArrayList;
	import java.util.List;

	/**
	* A POJO containing the status of an action and a {@link List} of messages.
	* This is mainly used as a DTO for the presentation layer
	*/
	public class StatusResponse {

	private Boolean success;
	private List<String> message;

	public StatusResponse() {
	this.message = new ArrayList<String>();
	}

	public StatusResponse(Boolean success) {
	super();
	this.success = success;
	this.message = new ArrayList<String>();
	}

	public StatusResponse(Boolean success, String message) {
	super();
	this.success = success;
	this.message = new ArrayList<String>();
	this.message.add(message);
	}

	public StatusResponse(Boolean success, List<String> message) {
	super();
	this.success = success;
	this.message = message;
	}

	public Boolean getSuccess() {
	return success;
	}
	public void setSuccess(Boolean success) {
	this.success = success;
	}

	public List<String> getMessage() {
	return message;
	}
	public void setMessage(String message) {
	this.message.add(message);
	}

	@Override
	public String toString() {
	StringBuilder sb = new StringBuilder();
	for (String mess: message) {
	sb.append(mess +", ");
	}

	return "StatusResponse [success=" + success + ", message=" + sb.toString()
	+ "]";
	}
	}

view raw StatusResponse.java hosted with ❤ by GitHub

We've completed writing our Java classes. In the next section, we will start writing the configuration files. Click here to proceed.

Share the joy:

Subscribe by reader

Subscribe by email Share

File Upload with Spring and jQuery (Part 3)

Review

In the previous section, we have implemented the Java classes. In this section, we will start writing the configuration files.

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

Configuration

To complete our application, here are the important configuration files that needs to be declared:

applicationContext.xml
spring-servlet.xml
web.xml

applicationContext.xml
Pay attention to the CommonsMultipartResolver and the MappingJacksonJsonView.

The CommonsMultipartResolver is a requirement for processing MultipartFile files
The MappingJacksonJsonView is required for serializing JSON responses properly. The extractValueFromSingleKeyModel is meant to remove the wrapper object when responding with single key model (see the Stack Overflow link for details).

	<?xml version="1.0" encoding="UTF-8"?>
	<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context-3.1.xsd
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">

	<context:property-placeholder properties-ref="deployProperties" />

	<!-- Activates various annotations to be detected in bean classes -->
	<context:annotation-config />

	<!-- Scans the classpath for annotated components that will be auto-registered as Spring beans.
	For example @Controller and @Service. Make sure to set the correct base-package -->
	<context:component-scan base-package="org.krams" />

	<!-- Configures the annotation-driven Spring MVC Controller programming model.
	Note that, with Spring 3.0, this tag works in Servlet MVC only! -->
	<mvc:annotation-driven />

	<!-- Configure the multipart resolver -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
	p:maxUploadSize="1000000"/>

	<!-- http://stackoverflow.com/questions/6479712/why-is-jackson-wrapping-my-objects-with-an-extra-layer-named-after-the-class -->
	<bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView"
	p:extractValueFromSingleKeyModel="true" />

	<mvc:resources mapping="/resources/**" location="/resources/" />

	<!-- Imports logging configuration -->
	<import resource="trace-context.xml"/>

	<bean id="deployProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean"
	p:location="/WEB-INF/spring.properties" />

	</beans>

view raw applicationContext.xml hosted with ❤ by GitHub

spring-servlet.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">

	<!-- Declare a view resolver -->
	<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"
	p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" p:order="1"/>

	</beans>

view raw spring-servlet.xml hosted with ❤ by GitHub

web.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>Spring File Upload Tutorial</display-name>

	<listener>
	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<servlet>
	<servlet-name>spring</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	</servlet>

	<servlet-mapping>
	<servlet-name>spring</servlet-name>
	<url-pattern>/</url-pattern>
	</servlet-mapping>

	</web-app>

view raw web.xml hosted with ❤ by GitHub

In the next section, we will discuss the HTML form for uploading files. Click here to proceed.

Share the joy:

Subscribe by reader

Subscribe by email Share

File Upload with Spring and jQuery (Part 4)

Review

In the previous section, we have written the configuration files. In this section, we will write the HTML form for uploading files.

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

To achieve a seamless AJAX-like file upload experience, we will be using blueimp's jQuery-File-Upload plugin for jQuery.

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 test-drive this plugin, please visit the following demos:

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. Not all browsers behave the same way. In my opinion, Chrome and Firefox are the best for development.

Html Form

Here's our upload form again:

Upload Form

Here's the full source:

	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

	<c:url value="/upload/message" var="messageUploadUrl"/>
	<c:url value="/upload/file" var="fileUploadUrl"/>

	<html>
	<head>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/jquery-ui/pepper-grinder/jquery-ui-1.8.16.custom.css"/>'/>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/style.css"/>'/>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-1.6.4.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-ui-1.8.16.custom.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/util.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-fileupload/vendor/jquery.ui.widget.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-fileupload/jquery.iframe-transport.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-fileupload/jquery.fileupload.js"/>'></script>

	<title>Upload</title>

	<script type='text/javascript'>
	$(function() {
	init();
	});

	function init() {
	$('input:button').button();
	$('#submit').button();

	$('#uploadForm').submit(function(event) {
	event.preventDefault();

	$.postJSON('${messageUploadUrl}', {
	owner: $('#owner').val(),
	description: $('#description').val(),
	filename: getFilelist()
	},
	function(result) {
	if (result.success == true) {
	dialog('Success', 'Files have been uploaded!');
	} else {
	dialog('Failure', 'Unable to upload files!');
	}
	});
	});

	$('#reset').click(function() {
	clearForm();
	dialog('Success', 'Fields have been cleared!');
	});

	$('#upload').fileupload({
	dataType: 'json',
	done: function (e, data) {
	$.each(data.result, function (index, file) {
	$('body').data('filelist').push(file);
	$('#filename').append(formatFileDisplay(file));
	$('#attach').empty().append('Add another file');
	});
	}
	});

	// Technique borrowed from http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file
	// http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input
	$("#attach").click(function () {
	$("#upload").trigger('click');
	});

	$('body').data('filelist', new Array());
	}

	function formatFileDisplay(file) {
	var size = '<span style="font-style:italic">'+(file.size/1000).toFixed(2)+'K</span>';
	return file.name + ' ('+ size +')<br/>';
	}

	function getFilelist() {
	var files = $('body').data('filelist');
	var filenames = '';
	for (var i=0; i<files.length; i<i++) {
	var suffix = (i==files.length-1) ? '' : ',';
	filenames += files[i].name + suffix;
	}
	return filenames;
	}

	function dialog(title, text) {
	$('#msgbox').text(text);
	$('#msgbox').dialog(
	{ title: title,
	modal: true,
	buttons: {"Ok": function() {
	$(this).dialog("close");}
	}
	});
	}

	function clearForm() {
	$('#owner').val('');
	$('#description').val('');
	$('#filename').empty();
	$('#attach').empty().append('Add a file');
	$('body').data('filelist', new Array());
	}
	</script>
	</head>

	<body>
	<h1 id='banner'>Upload Files</h1>

	<div>
	<form id='uploadForm'>
	<fieldset>
	<legend>Files</legend>
	<label for='owner'>Owner:</label><input type='text' id='owner'/><br/>
	<textarea name="description" id="description">Description here</textarea><br/>
	<span id='filename'></span><br/>
	<a href='#' id='attach'>Add a file</a><br/>
	<input id="upload" type="file" name="file" data-url="${fileUploadUrl}" multiple style="opacity: 0; filter:alpha(opacity: 0);"><br/>
	<input type='button' value='Reset' id='reset' />
	<input type='submit' value='Upload' id='submit'/>
	</fieldset>
	</form>
	</div>

	<div id='msgbox' title='' style='display:none'></div>
	</body>
	</html>

view raw form.jsp hosted with ❤ by GitHub

Let's dissect this source and make sense of it.

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

	<c:url value="/upload/message" var="messageUploadUrl"/>
	<c:url value="/upload/file" var="fileUploadUrl"/>

view raw snippet.jsp hosted with ❤ by GitHub

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.

	<script type='text/javascript' src='<c:url value="/resources/js/jquery-1.6.4.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-ui-1.8.16.custom.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/util.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-fileupload/vendor/jquery.ui.widget.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-fileupload/jquery.iframe-transport.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-fileupload/jquery.fileupload.js"/>'></script>

view raw snippet.jsp hosted with ❤ by GitHub

Initialization Function
This function contains the following initialization steps:

Beautify buttons
Attach submit function
Attach clear function
Attach file upload function
Initialize filelist data

	function init() {
	$('input:button').button();
	$('#submit').button();

	$('#uploadForm').submit(function(event) {
	event.preventDefault();

	$.postJSON('${messageUploadUrl}', {
	owner: $('#owner').val(),
	description: $('#description').val(),
	filename: getFilelist()
	},
	function(result) {
	if (result.success == true) {
	dialog('Success', 'Files have been uploaded!');
	} else {
	dialog('Failure', 'Unable to upload files!');
	}
	});
	});

	$('#reset').click(function() {
	clearForm();
	dialog('Success', 'Fields have been cleared!');
	});

	$('#upload').fileupload({
	dataType: 'json',
	done: function (e, data) {
	$.each(data.result, function (index, file) {
	$('body').data('filelist').push(file);
	$('#filename').append(formatFileDisplay(file));
	$('#attach').empty().append('Add another file');
	});
	}
	});

	// Technique borrowed from http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file
	// http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input
	$("#attach").click(function () {
	$("#upload").trigger('click');
	});

	$('body').data('filelist', new Array());
	}

view raw snippet.jsp hosted with ❤ by GitHub

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

	function formatFileDisplay(file) {
	var size = '<span style="font-style:italic">'+(file.size/1000).toFixed(2)+'K</span>';
	return file.name + ' ('+ size +')<br/>';
	}

view raw snippet.jsp hosted with ❤ by GitHub

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

	function getFilelist() {
	var files = $('body').data('filelist');
	var filenames = '';
	for (var i=0; i<files.length; i<i++) {
	var suffix = (i==files.length-1) ? '' : ',';
	filenames += files[i].name + suffix;
	}
	return filenames;
	}

view raw snippet.jsp hosted with ❤ by GitHub

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

	function dialog(title, text) {
	$('#msgbox').text(text);
	$('#msgbox').dialog(
	{ title: title,
	modal: true,
	buttons: {"Ok": function() {
	$(this).dialog("close");}
	}
	});
	}

view raw snippet.jsp hosted with ❤ by GitHub

Clear Function
This clears the form of its contents.

	function clearForm() {
	$('#owner').val('');
	$('#description').val('');
	$('#filename').empty();
	$('#attach').empty().append('Add a file');
	$('body').data('filelist', new Array());
	}

view raw snippet.jsp hosted with ❤ by GitHub

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

	<form id='uploadForm'>
	<fieldset>
	<legend>Files</legend>
	<label for='owner'>Owner:</label><input type='text' id='owner'/><br/>
	<textarea name="description" id="description">Description here</textarea><br/>
	<span id='filename'></span><br/>
	<a href='#' id='attach'>Add a file</a><br/>
	<input id="upload" type="file" name="file" data-url="${fileUploadUrl}" multiple style="opacity: 0; filter:alpha(opacity: 0);"><br/>
	<input type='button' value='Reset' id='reset' />
	<input type='submit' value='Upload' id='submit'/>
	</fieldset>
	</form>

view raw snippet.jsp hosted with ❤ by GitHub

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

Unfortunately, even though the jQuery-File-Upload plugin has great cross-browser support, HTML5 and traditional, there are still bugs and unwanted behavior. Maybe it's a configuration issue or a browser issue. In other words, always tests before you deploy to production. 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

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:

Subscribe by reader

Subscribe by email Share

File Upload with Spring and jQuery (Part 5)

Review

We have just completed our application! In the previous sections, we have discussed the functional specs, created the Java classes, declared the configuration files, and wrote the HTML files. In this section, we will build and run the application using Maven, and show how to import the project in Eclipse.

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

Running the Application

Access the source code

To download the source code, please visit the project's Github repository (click here)

Building with Maven

Ensure Maven is installed
Open a command window (Windows) or a terminal (Linux/Mac)
Run the following command:
```
mvn tomcat:run
```

You should see the following output:

[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'tomcat'.
[INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from central
[INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from snapshots
[INFO] ------------------------------------------
[INFO] Building spring-fileupload-tutorial Maven Webapp
[INFO]    task-segment: [tomcat:run]
[INFO] ------------------------------------------
[INFO] Preparing tomcat:run
[INFO] [apt:process {execution: default}]
[INFO] [resources:resources {execution: default-resources}]
[INFO] [tomcat:run {execution: default-cli}]
[INFO] Running war on http://localhost:8080/spring-fileupload-tutorial
Jun 20, 2012 8:35:14 PM org.apache.catalina.startup.Embedded start
INFO: Starting tomcat server
Jun 20, 2012 8:35:14 PM org.apache.catalina.core.StandardEngine start
INFO: Starting Servlet Engine: Apache Tomcat/6.0.29
Jun 20, 2012 8:35:15 PM org.apache.catalina.core.ApplicationContext log
INFO: Initializing Spring root WebApplicationContext
Jun 20, 2012 8:35:17 PM org.apache.coyote.http11.Http11Protocol init
INFO: Initializing Coyote HTTP/1.1 on http-8080
Jun 20, 2012 8:35:17 PM org.apache.coyote.http11.Http11Protocol start
INFO: Starting Coyote HTTP/1.1 on http-8080

Note:

If the project will not build due to missing repositories, please enable the repositories section in the pom.xml!

Access the Entry page

Follow the steps with Building with Maven
Open a browser
Enter the following URL (8080 is the default port for Tomcat):
```
http://localhost:8080/spring-fileupload-tutorial/upload
```

Attach a file

Click on "Add a file"

Browse for a file and add it. Check the logs and you should see something similar to the following:

[DEBUG] [tomcat-http--24 02:15:20] (TraceInterceptor.java:writeToLog:21) Entering UploadController.upload(org.springframework.web.multipart.commons.CommonsMultipartFile@d1258b)
[DEBUG] [tomcat-http--24 02:15:20] (UploadController.java:upload:43) Writing file to disk...done
[DEBUG] [tomcat-http--24 02:15:20] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.upload(): [UploadedFile [name=Tulips.jpg, size=620888, url=http://localhost:8080/spring-fileupload-tutorial/resources/Tulips.jpg, thumbnail_url=null, delete_url=null, delete_type=null]]

Attach multiple files

Click on "Add another file"

Browse for files and add them. Check the logs and you should see something similar to the following:

[DEBUG] [tomcat-http--26 02:15:42] (TraceInterceptor.java:writeToLog:21) Entering UploadController.upload(org.springframework.web.multipart.commons.CommonsMultipartFile@7783ea)
[DEBUG] [tomcat-http--26 02:15:42] (UploadController.java:upload:43) Writing file to disk...done
[DEBUG] [tomcat-http--26 02:15:42] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.upload(): [UploadedFile [name=Hydrangeas.jpg, size=595284, url=http://localhost:8080/spring-fileupload-tutorial/resources/Hydrangeas.jpg, thumbnail_url=null, delete_url=null, delete_type=null]]
[DEBUG] [tomcat-http--27 02:15:42] (TraceInterceptor.java:writeToLog:21) Entering UploadController.upload(org.springframework.web.multipart.commons.CommonsMultipartFile@85ec1b)
[DEBUG] [tomcat-http--27 02:15:42] (UploadController.java:upload:43) Writing file to disk...done
[DEBUG] [tomcat-http--27 02:15:42] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.upload(): [UploadedFile [name=Jellyfish.jpg, size=775702, url=http://localhost:8080/spring-fileupload-tutorial/resources/Jellyfish.jpg, thumbnail_url=null, delete_url=null, delete_type=null]]

Upload the files

Click on "Upload". Check the logs and you should see something similar to the following:

[DEBUG] [tomcat-http--30 02:16:20] (TraceInterceptor.java:writeToLog:21) Entering UploadController.message(Message [owner=John Smith, description=These are my files. I owned them., filename=Tulips.jpg,Hydrangeas.jpg,Jellyfish.jpg])
[DEBUG] [tomcat-http--30 02:16:20] (UploadController.java:message:33) Service processing...done
[DEBUG] [tomcat-http--30 02:16:20] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.message(): StatusResponse [success=true, message=Message received, ]

Note:

When adding a file via the "Add a file" link, the file is automatically uploaded to the backend. The backend responds with an object containing the filename (and other file details). When you click on the "Upload" button, the form data is sent along with the filename. The file itself is never uploaded in this second step because it's already in the server!

Import the project in Eclipse

Ensure Maven is installed
Open a command window (Windows) or a terminal (Linux/Mac)
Run the following command:
```
mvn eclipse:eclipse -Dwtpversion=2.0
```

You should see the following output:

[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'eclipse'.
[INFO] org.apache.maven.plugins: checking for updates from central
[INFO] org.apache.maven.plugins: checking for updates from snapshots
[INFO] org.codehaus.mojo: checking for updates from central
[INFO] org.codehaus.mojo: checking for updates from snapshots
[INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from central
[INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from snapshots
[INFO] -----------------------------------------
[INFO] Building spring-fileupload-tutorial Maven Webapp
[INFO]    task-segment: [eclipse:eclipse]
[INFO] -----------------------------------------
[INFO] Preparing eclipse:eclipse
[INFO] No goals needed for project - skipping
[INFO] [eclipse:eclipse {execution: default-cli}]
[INFO] Adding support for WTP version 2.0.
[INFO] -----------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -----------------------------------------

This command will add the following files to your project:

.classpath
.project
.settings
target

You may have to enable "show hidden files" in your file explorer to view them

Open Eclipse and import the project

Conclusion

That's it! We've have successfully completed our file upload application with Spring and jQuery-File-Upload plugin. We've learned how to setup an HTML form for file uploads with AJAX-like experience.

I hope you've enjoyed this tutorial. Don't forget to check my other tutorials at the Tutorials section.

Revision History

Revision	Date	Description
1	June 20 2012	Uploaded tutorial
2	June 26 2012	Corrected wrong entry url
3	June 27 2012	Corrected wrong entry url again

Share the joy:

Subscribe by reader

Subscribe by email Share

Monday, June 18, 2012

Email with Spring and SendGrid (Part 1)

Introduction

In this article we will study how to send email with Spring by integrating with SendGrid's email service. Instead of the usual SMTP, we will use HTTP to communicate with SendGrid.

Part 1: Introduction and Functional Specs
Part 2: SendGrid account setup
Part 3: Java classes
Part 4: XML configuration
Part 5: Running the Application

Dependencies

Spring core 3.1.0.RELEASE
SendGrid account
See pom.xml for details

Github
To access the source code, please visit the project's Github repository (click here)

Functional Specs

Let's define our application's requirements:

Create a simple form where users can compose and send emails
Emails do not need to be persisted in a database
Send email via HTTP instead of SMTP to avoid firewall issues

Here's our Use Case diagram:

[User]-(Compose)
[User]-(Send)

In MVC terms, we decompose the application as follows:

Model: A simple Map object that conforms with SendGrid's message format
View: An HTML-based form where users can compose and send emails
Controller: Spring controller that receives the request. The controller delegates actual work to the service layer which eventually executes an HTTP call to send email to SendGrid.

What is SendGrid?

SendGrid's cloud-based email infrastructure relieves businesses of the cost and complexity of maintaining custom email systems. SendGrid provides reliable delivery, scalability and real-time analytics along with flexible API's that make custom integration a breeze.

Source: http://www.sendgrid.com

Why SendGrid?

It's easy to integrate with.
It has a free plan that allows 200 email messages per day.
SendGrid has an HTTP API for sending emails which is very simple to use.

Screenshots

Compose Email Form

After clicking "Send", the email message is sent. An alert is shown to confirm the action.

Sent alert

When user clicks on "Reset", the contents of the fields are cleared. An alert is shown to confirm the action.

Fields cleared alert

Email Messages
This is the sample email received from Gmail. Notice Gmail is able to show that this email was sent via SendGrid.

Gmail email

email details

This is the sample email received from Yahoo.

Yahoo email

In the next section, we will show how to sign-up with SendGrid's email service. This is required before we can start sending emails. Click here to proceed.

Share the joy:

Subscribe by reader

Subscribe by email Share

Email with Spring and SendGrid (Part 2)

Review

In the previous section, we have laid down the functional specs of the application . In this section, we will demonstrate how to sign-up with SendGrid's email service. This is required so that we can integrate with their service.

Disclaimer

SendGrid manually approves each account. It takes almost a day before they can approve your account. If it takes longer, I suggest sending an email to their tech support.

Part 1: Introduction and Functional Specs
Part 2: SendGrid account setup
Part 3: Java classes
Part 4: XML configuration
Part 5: Running the Application

1. Go to SendGrid's page at http://www.sendgrid.com

2. Click on "Pricing" and scroll-down.

3. At the bottom portion of the page, there's a link to the "Free Plan". Click it.

4. The account creation page is displayed. Fill-in the details. Then submit your application. Remember your username and password here. These will be your API username and key.

5. You will be redirected to the "Get Started" page. Complete all the required actions. Notice your account is on provision. It might take a day for it to be approved.

Account Completion
Once your account has been provisioned, visit your SendGrid account page

SendGrid API

SendGrid offers numerous APIs to allow developers to fully integrate with their service. They have the following APIs:

Customer Subuser API
Event API
Parse API
Web API
SMTP API
Reseller API
Newsletter API

We will focus on the Mail module, which is under the Web API. Please see http://docs.sendgrid.com/documentation/api/web-api/mail/#send for the complete documentation.

To test the Mail module, you can either use your browser or CURL (if you're familiar with it).

Browser-based test:

https://sendgrid.com/api/mail.send.xml?api_user=youremail@domain.com&api_key=secureSecret&to=destination@example.com&toname=Destination&subject=Example%20Subject&text=testingtextbody&from=info@domain.com

CURL-based test:

curl -d 'to=destination@example.com&toname=Destination&subject=Example Subject&text=testingtextbody&from=info@domain.com&api_user=sendgridUsername&api_key=sendgridPassword' https://sendgrid.com/api/mail.send.json

But how do we use the Web API via Java and Spring? We will discuss that on the next section. But to satisfy your inquisitive minds, here's a preview:

	public StatusResponse send(Message message) {
	try {
	MultiValueMap<String, Object> vars = new LinkedMultiValueMap<String, Object>();
	vars.add(SendGridParameter.API_USER, sendgridApiUser);
	vars.add(SendGridParameter.API_KEY, sendgridApiKey);
	vars.add(SendGridParameter.SENDER_NAME, message.getSenderName());
	vars.add(SendGridParameter.SENDER_EMAIL, message.getSenderEmail());
	vars.add(SendGridParameter.BLIND_COPY_EMAIL, message.getCcEmail());
	vars.add(SendGridParameter.SUBJECT, message.getSubject());
	vars.add(SendGridParameter.TEXT, "");
	vars.add(SendGridParameter.HTML, message.getBody());
	vars.add(SendGridParameter.RECEIVER_EMAIL, message.getReceiverEmail());
	vars.add(SendGridParameter.RECEIVER_NAME, message.getReceiverName());

	RestTemplate restTemplate = new RestTemplate();
	restTemplate.postForLocation(SendGridParameter.URL, vars);
	} catch (Exception ex) {
	logger.error(ex);
	return new StatusResponse(false, "An error has occurred!");
	}

	return new StatusResponse(true, "Message sent");
	}

view raw Snippet.java hosted with ❤ by GitHub

In the next section, we will start writing the Java classes and discuss the SendGrid API. Click here to proceed.

Share the joy:

Subscribe by reader

Subscribe by email Share

Email with Spring and SendGrid (Part 3)

Review

In the previous section, we have learned how to sign-up with SendGrid's free plan. In this section, we will start writing the Java classes and discuss the project's structure.

Part 1: Introduction and Functional Specs
Part 2: SendGrid account setup
Part 3: Java classes
Part 4: XML configuration
Part 5: Running the Application

Project Structure

Our application is a Maven project which means our project follows the Maven structure.

Here's a preview of our project's structure:

Domain Layer

The domain layer contains a Message class that represents an email message.

	package org.krams.domain;

	import java.io.Serializable;

	public class Message implements Serializable {

	private static final long serialVersionUID = -4093981756240899937L;
	private String senderName;
	private String senderEmail;
	private String ccEmail;
	private String subject;
	private String body;
	private String receiverName;
	private String receiverEmail;

	public Message() {
	super();
	}

	public Message(String senderName, String senderEmail, String ccEmail,
	String subject, String body, String receiverName,
	String receiverEmail) {
	super();
	this.senderName = senderName;
	this.senderEmail = senderEmail;
	this.ccEmail = ccEmail;
	this.subject = subject;
	this.body = body;
	this.receiverName = receiverName;
	this.receiverEmail = receiverEmail;
	}

	...getters/setters
	}

view raw Message.java hosted with ❤ by GitHub

Controller Layer

The controller layer contains a simple controller that serves a form for composing and sending emails. It also contains a send method that accepts a Message object. The controller delegates the sending part to an email service.

	package org.krams.controller;

	import org.krams.domain.Message;
	import org.krams.response.StatusResponse;
	import org.krams.service.EmailService;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.RequestBody;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.bind.annotation.RequestMethod;
	import org.springframework.web.bind.annotation.ResponseBody;

	@Controller
	@RequestMapping("/email")
	public class EmailController {

	@Autowired
	private EmailService emailService;

	@RequestMapping
	public String form() {
	return "form";
	}

	@RequestMapping(value ="/send", method=RequestMethod.POST)
	public @ResponseBody StatusResponse send(@RequestBody Message message) {
	return emailService.send(message);
	}
	}

view raw EmailController.java hosted with ❤ by GitHub

Service Layer

The service layer contains the email service. We have a simple interface EmailService for sending messages.

	package org.krams.service;

	import org.krams.domain.Message;
	import org.krams.response.StatusResponse;

	public interface EmailService {
	StatusResponse send(Message message);
	}

view raw EmailService.java hosted with ❤ by GitHub

The actual implementation SendGridEmailService relies on RestTemplate to send the email message via HTTP as a POST method.

	package org.krams.service;

	import org.apache.log4j.Logger;
	import org.krams.domain.Message;
	import org.krams.response.StatusResponse;
	import org.krams.util.SendGridParameter;
	import org.springframework.beans.factory.annotation.Value;
	import org.springframework.stereotype.Service;
	import org.springframework.util.LinkedMultiValueMap;
	import org.springframework.util.MultiValueMap;
	import org.springframework.web.client.RestTemplate;

	@Service
	public class SendGridEmailService implements EmailService {

	protected static Logger logger = Logger.getLogger("service");
	private RestTemplate restTemplate = new RestTemplate();

	@Value("${sendgrid.api.user}")
	private String sendgridApiUser;

	@Value("${sendgrid.api.key}")
	private String sendgridApiKey;

	@Override
	public StatusResponse send(Message message) {
	try {
	MultiValueMap<String, Object> vars = new LinkedMultiValueMap<String, Object>();
	vars.add(SendGridParameter.API_USER, sendgridApiUser);
	vars.add(SendGridParameter.API_KEY, sendgridApiKey);
	vars.add(SendGridParameter.SENDER_NAME, message.getSenderName());
	vars.add(SendGridParameter.SENDER_EMAIL, message.getSenderEmail());
	vars.add(SendGridParameter.BLIND_COPY_EMAIL, message.getCcEmail());
	vars.add(SendGridParameter.SUBJECT, message.getSubject());
	vars.add(SendGridParameter.TEXT, "");
	vars.add(SendGridParameter.HTML, message.getBody());
	vars.add(SendGridParameter.RECEIVER_EMAIL, message.getReceiverEmail());
	vars.add(SendGridParameter.RECEIVER_NAME, message.getReceiverName());

	restTemplate.postForLocation(SendGridParameter.URL, vars);
	} catch (Exception ex) {
	logger.error(ex);
	return new StatusResponse(false, "An error has occurred!");
	}

	return new StatusResponse(true, "Message sent");
	}


	}

view raw SendGridEmailService.java hosted with ❤ by GitHub

Utility Layer

This layer contains helper classes and interfaces. Here we've extracted the required SendGrid parameters for sending emails via HTTP. Please refer to Part 2 of this guide if you need to review the SendGrid Web API.

	package org.krams.util;

	public interface SendGridParameter {
	public static final String URL = "http://sendgrid.com/api/mail.send.json";
	public static final String API_USER = "api_user";
	public static final String API_KEY = "api_key";
	public static final String RECEIVER_EMAIL = "to";
	public static final String RECEIVER_NAME = "toname";
	public static final String SUBJECT = "subject";
	public static final String TEXT = "text";
	public static final String HTML = "html";
	public static final String SENDER_EMAIL = "from";
	public static final String SENDER_NAME = "fromname";
	public static final String BLIND_COPY_EMAIL = "bcc";
	}

view raw SendGridParameter.java hosted with ❤ by GitHub

View Layer

The view layer contains a simple html form for composing and sending email messages. One important section here that needs to be discussed is the usage of the postJSON plugin.

	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

	<c:url value="/email/send" var="sendUrl"/>

	<html>
	<head>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/jquery-ui/pepper-grinder/jquery-ui-1.8.16.custom.css"/>'/>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/style.css"/>'/>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-1.6.4.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery-ui-1.8.16.custom.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/util.js"/>'></script>

	<title>Email</title>

	<script type='text/javascript'>
	$(function() {
	init();
	});

	function init() {
	$('input:button').button();
	$('#submit').button();

	$('#emailForm').submit(function() {
	event.preventDefault();

	$.postJSON('${sendUrl}', {
	senderName: $('#senderName').val(),
	senderEmail: $('#senderEmail').val(),
	ccEmail: $('#ccEmail').val(),
	subject: $('#subject').val(),
	body: $('#textBody').val(),
	receiverName: $('#receiverName').val(),
	receiverEmail: $('#receiverEmail').val()
	},
	function(result) {
	if (result.success == true) {
	dialog('Success', 'Email has been sent!');
	} else {
	dialog('Failure', 'Email has not been sent!');
	}
	});
	});

	$('#reset').click(function() {
	clearForm();
	dialog('Success', 'Fields have been cleared!');
	});
	}

	function dialog(title, text) {
	$('#msgbox').text(text);
	$('#msgbox').dialog(
	{ title: title,
	modal: true,
	buttons: {"Ok": function() {
	$(this).dialog("close");}
	}
	});
	}

	function clearForm() {
	$('#receiverName').val('');
	$('#receiverEmail').val('');
	$('#ccEmail').val('');
	$('#senderName').val('');
	$('#senderEmail').val('');
	$('#subject').val('');
	$('#textBody').val('');
	}
	</script>
	</head>

	<body>
	<h1 id='banner'>Compose Email</h1>

	<div>
	<form id='emailForm'>
	<fieldset>
	<legend>New Email</legend>
	<label for='receiverName'>To (name):</label><input type='text' id='receiverName'/><br/>
	<label for='receiverEmail'>To (email)</label><input type='text' id='receiverEmail'/><br/>
	<label for='ccEmail'>Cc (email):</label><input type='text' id='ccEmail'/><br/>
	<label for='senderName'>From (name):</label><input type='text' id='senderName'/><br/>
	<label for='senderEmail'>From (email):</label><input type='text' id='senderEmail'/><br/>
	<label for='subject'>Subject:</label><input type='text' id='subject'/><br/>
	<label for='textBody' style="display:break">Message</label>
	<textarea name="textBody" id="textBody">Email message here</textarea><br/>
	<input type='button' value='Reset' id='reset' />
	<input type='submit' value='Send' id='submit'/>
	</fieldset>
	</form>
	</div>

	<div id='msgbox' title='' style='display:none'></div>
	</body>
	</html>

view raw form.jsp hosted with ❤ by GitHub

jQuery plugin

postJSON is a jQuery plugin that allows sending of JSON objects via POST. This plugin is based a plugin I found at the jQuery plugin repository. Unfortunately, the location doesn't seem to exist anymore. Also, I've made some modifications with the plugin (see the comments).

	/*************************************************
	* Source: http://plugins.jquery.com/project/postJSON
	* Modifications:
	* a. Replace json to jsonData
	* b. Replace success to callbackSuccess
	*
	* Function: $.postJSON ( url, jsonObject, success, options )
	* url: The url to post the json object to
	* jsonObject: The JSON object to post
	* success: The success handler to invoke on successful submission
	* options: Additional options to provide to the AJAX call. This is the exact same object you would use when calling $.ajax directly.
	*
	* Description:
	* $.postJSON simplifies posting JSON objects to any url by invoking $.ajax with the required options. The specified JSON object will be stringified and posted to the url.
	* It's up to the server to deserialize the stringified JSON object. ASP.NET MVC 3 will do this automatically
	*
	* Sample usage:
	* var onSuccess = function() { ... };
	* var onError = function() { ... };
	* $.postJSON ( '/account/login', { username: 'jack', password: 'secretPass' }, onSuccess, { error: onError } );
	**************************************************/
	(function ($) {
	$.extend({
	postJSON: function (url, jsonData, callbackSuccess, options) {
	var config = {
	url: url,
	type: "POST",
	data: jsonData ? JSON.stringify(jsonData) : null,
	dataType: "json",
	contentType: "application/json; charset=utf-8",
	success: callbackSuccess
	};

	// $.ajax($.extend(options, config)); // only works for jQuery 1.4+
	$.ajaxSetup(config); // only works for jQuery 1.5+
	$.ajax();

	// reset back so that future users aren't affected
	config = {
	url: null,
	type: "GET",
	data: null,
	dataType: null,
	contentType: "application/x-www-form-urlencoded",
	success: null
	};
	$.ajaxSetup(config);
	}
	});
	})(jQuery);

view raw util.js hosted with ❤ by GitHub

We've completed writing our Java classes. In the next section, we will start writing the configuration files. Click here to proceed.

Share the joy:

Subscribe by reader

Subscribe by email Share

Email with Spring and SendGrid (Part 4)

Review

In the previous section, we have implemented the Java classes. In this section, we will start writing the configuration files to complete our Spring application.

Part 1: Introduction and Functional Specs
Part 2: SendGrid account setup
Part 3: Java classes
Part 4: XML configuration
Part 5: Running the Application

Configuration

To complete our application, here are the important configuration files that needs to be declared:

spring.properties
applicationContext.xml
spring-servlet.xml
web.xml

The spring.properties file contains the SendGrid user and key values to access the Web API. This is equivalent to your SendGrid's username and password.

	# SendGrid properties
	sendgrid.api.user=YOUR-USER-API
	sendgrid.api.key=YOUR-KEY-API

view raw spring.properties hosted with ❤ by GitHub

applicationContext.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context-3.1.xsd
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">

	<context:property-placeholder properties-ref="deployProperties" />

	<!-- Activates various annotations to be detected in bean classes -->
	<context:annotation-config />

	<!-- Scans the classpath for annotated components that will be auto-registered as Spring beans.
	For example @Controller and @Service. Make sure to set the correct base-package -->
	<context:component-scan base-package="org.krams" />

	<!-- Configures the annotation-driven Spring MVC Controller programming model.
	Note that, with Spring 3.0, this tag works in Servlet MVC only! -->
	<mvc:annotation-driven />

	<mvc:resources mapping="/resources/**" location="/resources/" />

	<!-- Imports logging configuration -->
	<import resource="trace-context.xml"/>

	<bean id="deployProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean"
	p:location="/WEB-INF/spring.properties" />

	</beans>

view raw applicationContext.xml hosted with ❤ by GitHub

spring-servlet.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">

	<!-- Declare a view resolver -->
	<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"
	p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" p:order="1"/>

	</beans>

view raw spring-servlet.xml hosted with ❤ by GitHub

web.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>Spring SendGrid Tutorial</display-name>

	<listener>
	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<servlet>
	<servlet-name>spring</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	</servlet>

	<servlet-mapping>
	<servlet-name>spring</servlet-name>
	<url-pattern>/</url-pattern>
	</servlet-mapping>

	</web-app>

view raw web.xml hosted with ❤ by GitHub

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:

Subscribe by reader

Subscribe by email Share

Email with Spring and SendGrid (Part 5)

Review

Part 1: Introduction and Functional Specs
Part 2: SendGrid account setup
Part 3: Java classes
Part 4: XML configuration
Part 5: Running the Application

Running the Application

Access the source code

To download the source code, please visit the project's Github repository (click here)

Building with Maven

Ensure Maven is installed
Open a command window (Windows) or a terminal (Linux/Mac)
Run the following command:
```
mvn tomcat:run
```

You should see the following output:

[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'tomcat'.
[INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from central
[INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from snapshots
[INFO] ------------------------------------------
[INFO] Building spring-sendgrid-tutorial Maven Webapp
[INFO]    task-segment: [tomcat:run]
[INFO] ------------------------------------------
[INFO] Preparing tomcat:run
[INFO] [apt:process {execution: default}]
[INFO] [resources:resources {execution: default-resources}]
[INFO] [tomcat:run {execution: default-cli}]
[INFO] Running war on http://localhost:8080/spring-sendgrid-tutorial
Jun 18, 2012 10:27:47 PM org.apache.catalina.startup.Embedded start
INFO: Starting tomcat server
Jun 18, 2012 10:27:47 PM org.apache.catalina.core.StandardEngine start
INFO: Starting Servlet Engine: Apache Tomcat/6.0.29
Jun 18, 2012 10:27:48 PM org.apache.catalina.core.ApplicationContext log
INFO: Initializing Spring root WebApplicationContext
Jun 18, 2012 10:27:49 PM org.apache.coyote.http11.Http11Protocol init
INFO: Initializing Coyote HTTP/1.1 on http-8080
Jun 18, 2012 10:27:49 PM org.apache.coyote.http11.Http11Protocol start
INFO: Starting Coyote HTTP/1.1 on http-8080

Note:

If the project will not build due to missing repositories, please enable the repositories section in the pom.xml!

Access the Entry page

Follow the steps with Building with Maven
Open a browser
Enter the following URL (8080 is the default port for Tomcat):
```
http://localhost:8080/spring-sendgrid-tutorial/email
```

Send an email

Compose and email

Send it. You should see within the logs an output similar to the following:

[DEBUG] [tomcat-http--23 04:25:03] (TraceInterceptor.java:writeToLog:21) Entering EmailController.send(org.krams.domain.Message@486d1d)
[DEBUG] [tomcat-http--23 04:25:03] (TraceInterceptor.java:writeToLog:21) Entering SendGridEmailService.send(org.krams.domain.Message@486d1d)
[DEBUG] [tomcat-http--23 04:25:04] (TraceInterceptor.java:writeToLog:21) Leaving SendGridEmailService.send(): StatusResponse [success=true, message=Message sent, ]
[DEBUG] [tomcat-http--23 04:25:04] (TraceInterceptor.java:writeToLog:21) Leaving EmailController.send(): StatusResponse [success=true, message=Message sent, ]

Import the project in Eclipse

Ensure Maven is installed
Open a command window (Windows) or a terminal (Linux/Mac)
Run the following command:
```
mvn eclipse:eclipse -Dwtpversion=2.0
```

You should see the following output:

[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'eclipse'.
[INFO] org.apache.maven.plugins: checking for updates from central
[INFO] org.apache.maven.plugins: checking for updates from snapshots
[INFO] org.codehaus.mojo: checking for updates from central
[INFO] org.codehaus.mojo: checking for updates from snapshots
[INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from central
[INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from snapshots
[INFO] -----------------------------------------
[INFO] Building spring-sendgrid-tutorial Maven Webapp
[INFO]    task-segment: [eclipse:eclipse]
[INFO] -----------------------------------------
[INFO] Preparing eclipse:eclipse
[INFO] No goals needed for project - skipping
[INFO] [eclipse:eclipse {execution: default-cli}]
[INFO] Adding support for WTP version 2.0.
[INFO] -----------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -----------------------------------------

This command will add the following files to your project:

.classpath
.project
.settings
target

You may have to enable "show hidden files" in your file explorer to view them

Open Eclipse and import the project

Conclusion

That's it! We've have successfully completed our email application with Spring and SendGrid integration. We've learned how to setup a SendGrid account and how to utilize its Web API via Spring's RestTemplate.

I hope you've enjoyed this tutorial. Don't forget to check my other tutorials at the Tutorials section.

Revision History

Revision	Date	Description
1	June 18 2012	Uploaded tutorial

Share the joy:

Subscribe by reader

Subscribe by email Share

Top Tabs

Wednesday, June 20, 2012

Introduction

Table of Contents

Dependencies

Functional Specs

Screenshots

Next

Review

Table of Contents

Project Structure

Domain Layer

Controller Layer

Others

Next

Review

Table of Contents

Configuration

Next

Review

Table of Contents

Html Form

Browser Bugs

Next

Review

Table of Contents

Running the Application

Access the source code

Building with Maven

Access the Entry page

Attach a file

Attach multiple files

Upload the files

Note:

Import the project in Eclipse

Conclusion

Revision History

Monday, June 18, 2012

Introduction

Table of Contents

Dependencies

Functional Specs

Screenshots

Next

Review

Disclaimer

Table of Contents

SendGrid API

Next

Review

Table of Contents

Project Structure

Domain Layer

Controller Layer

Service Layer

Utility Layer

View Layer

jQuery plugin

Next

Review

Table of Contents

Configuration

Next

Review

Table of Contents

Running the Application

Access the source code

Building with Maven

Access the Entry page

Send an email

Import the project in Eclipse

Conclusion

Revision History