Wednesday, December 2, 2009

FileUpload with GWT-Ext and java EE servlet

This simple web application will demonstrate how to upload an image file by using GWT-Ext (on client side) and java EE servlet instead of GWT remote service (on server side). This web application allows user to browse for an image file and submit it to the apache tomcat web server, the request will be processed by a servlet deployed on the web server, it will extract the request for binary data and save it into the specified directory on the deployment location of web application. Once the image file is registered successfully it will be shown up on the current page.

To get start, we need to create a web application project, you can follow my previous post
Using WindowBuilder for Google Web Toolkit & GWT-EXT, Once project is setup, we need a window to interact with the user, which looks like:

You can create a window by using the following code:

package com.mycompany.project.client;

import com.gwtext.client.core.Connection;
import com.gwtext.client.core.EventObject;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.MessageBox;
import com.gwtext.client.widgets.Window;
import com.gwtext.client.widgets.event.ButtonListenerAdapter;
import com.gwtext.client.widgets.form.Form;
import com.gwtext.client.widgets.form.FormPanel;
import com.gwtext.client.widgets.form.TextField;
import com.gwtext.client.widgets.form.event.FormListenerAdapter;

public class FileUploadWindow extends Window {
FormPanel formPanel = new FormPanel();
Grid grid = new Grid(1,1);
public FileUploadWindow() {
super("Photo Upload");
setSize("500px", "400px");
//setup error reader to process from submit response from server
RecordDef errorRecordDef = new RecordDef(new FieldDef[]{
new StringFieldDef("id"),
new StringFieldDef("msg")
XmlReader errorReader = new XmlReader("field", errorRecordDef);

final TextField textField = new TextField("Photo", "file");
textField.setSize("334px", "28px");
this.addButton(new Button("Submit",new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
MessageBox.confirm("Confirm", "Do you want to submit?",
new MessageBox.ConfirmCallback() {
public void execute(String btnID) {
if (btnID.equals("yes")) {
formPanel.getForm().submit(GWT.getModuleBaseURL()+"upload", null, Connection.POST, "Saving Data...", false);
formPanel.addFormListener(new FormListenerAdapter(){
public boolean doBeforeAction(Form form) {return true;}
public void onActionComplete(Form form, int httpStatus, java.lang.String responseText){
Image image = new Image("images/"+responseText);
image.setSize("300px", "300px");
grid.setWidget(0, 0, image);
public void onActionFailed(Form form, int httpStatus, java.lang.String responseText){"File upload is failed.");


Next step, create a servlet as code below:

package com.mycompany.project.servlet;

import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class FileUploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String rootDirectory = "C:/apache-tomcat-6.0.18/webapps/ImageViewer/";
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart) {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem);
if (item.isFormField()) {
} else {
String fileName = item.getName();
if (fileName != null && !fileName.equals("")) {
fileName = FilenameUtils.getName(fileName);
File uploadedFile = new File(rootDirectory+"images/"+fileName);
try {
} catch (Exception e) {
} catch (FileUploadException e) {

For this step you need to add commons-fileupload-1.2.1.jar and commons-io-1.4.jar to the project build path, and add the following code into web.xml:


I advise you to create a folder name “images” in the root directory (war) to store uploaded files and don’t forget to update entry point class as follow:

public class ImageViewer implements EntryPoint {

public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
Button clickMeButton = new Button();
clickMeButton.setText("Click me!");
clickMeButton.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event) {
FileUploadWindow window = new FileUploadWindow();

Finally compile the project, deploy it to apache tomcat server and have it a test, if there’s nothing wrong you must see the result as below

The source code download: