Using JQuery's Uploadify with Stripes

Purpose: The intent of this document is to show the necessary steps needed to allow Stripes users the ability to upload files using the JQuery uploadify script framework. The below sample is not production quality, its provided to show the effort required to interface Stripes with Uploadify.

Requirements:

Stripes Framework 1.5.1 or greater (http://www.stripesframework.org/)
Jquery.uploadify-v2.0.3 (http://www.uploadify.com/_files/jquery.uploadify-v2.0.3.zip)
Commons FileUpload 1.2.1 (http://commons.apache.org/fileupload/)

Instructions: In order to make these changes you should be familiar with both JavaScript and the Stripes framework.

In your web.xml file make the following additions:

<init-param>
  <param-name>MultipartWrapper.Class</param-name>
  <param-value>net.sourceforge.stripes.controller.multipart.CommonsMultipartWrapper</param-value>
</init-param>
<init-param>
  <param-name>FileUpload.MaximumPostSize</param-name>
  <param-value>500m</param-value>
</init-param>

Add the following ActionBean named UploadActionBean.java

import java.io.File;
import java.io.IOException;
import net.sourceforge.stripes.action.ActionBean;
import net.sourceforge.stripes.action.ActionBeanContext;
import net.sourceforge.stripes.action.Before;
import net.sourceforge.stripes.action.DefaultHandler;
import net.sourceforge.stripes.action.FileBean;
import net.sourceforge.stripes.action.Resolution;
import net.sourceforge.stripes.action.StreamingResolution;
import net.sourceforge.stripes.action.UrlBinding;
import net.sourceforge.stripes.controller.LifecycleStage;
import net.sourceforge.stripes.controller.StripesRequestWrapper;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.log4j.Logger;
 

/**
 *
 * Purpose: This class allows the JQuery uploadify  http://www.uploadify.com/download/) client side script to  
 * communicate with a Java backend and save files on a remote system.
 *
 * @author  <a href="fowlks@ais.msu.edu" >Kevin Fowlks</a>
 * @version  1.0
 * @created  August 13th, 2009
 */


@UrlBinding("/upload.action")

public class UploadActionBean implements ActionBean
{


    private static Logger log = Logger.getLogger( UploadActionBean.class );
    private ActionBeanContext context;
    private FileBean filedata;

    public ActionBeanContext getContext() {
        return this.context;
    }

    public void setContext(ActionBeanContext context) {
        this.context = context;
    }

    @SuppressWarnings("unused")
    @Before(stages=LifecycleStage.BindingAndValidation)
    private void rehydrate()
    {
        StripesRequestWrapper req = (StripesRequestWrapper)getContext().getRequest();

       try
       {
             if ( ServletFileUpload.isMultipartContent( req ) )
             {
                   filedata = req.getFileParameterValue("Filedata");
             }
         }
       catch (Exception e )
       {
             log.error( e.getMessage(), e );
       }
    }

    @DefaultHandler
    public Resolution upload()
    {

      //TODO URL Encode the messages

        String errorMsg = null;

        if ( filedata != null)
        {       

            log.debug("Filedata: " +  filedata.getFileName());
 
            try
            {    

                  //TODO Added parameter in web.xml for default upload directory

                  File dirFile = new File("c:/tmp");
                  File tempFile = File.createTempFile(filedata.getFileName() + ".", null, dirFile);

                  filedata.save( tempFile );
                  log.info("Saved file " + tempFile.getAbsolutePath() + ", Successfully!" );
            }
            catch (IOException e)
            {
                  errorMsg = e.getMessage();
                  log.error( "Error while writing file :" + filedata.getFileName() + " / " + e.getMessage()  );
                  return new StreamingResolution( "text/xml", errorMsg );
            }

   
            return new StreamingResolution("text/xml","1");

        }
  

            return new StreamingResolution( "text/xml", "An unknown error has occurred!");
    }

}

Next Add the following Java Server Page (JSP) named upload.jsp

*Note: The below JSP references images, javascript files and CSS files that can be found in the JQUERY Uploadify archive.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery Uploadify Stripes Example</title>

<link href="css/default.css" rel="stylesheet" type="text/css" />

<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>

<script type="text/javascript" src="js/swfobject.js" ></script>

<script type="text/javascript" src="js/jquery.uploadify.v2.0.2.min.js" ></script>

<script type="text/javascript">

$(document).ready(function() {

     $("#uploadify").uploadify({

           'uploader'       : 'js/uploadify.swf',
           'script'         : 'upload.action',
           'cancelImg'      : 'images/cancel.png',
           'folder'         : 'uploads',
           'queueID'        : 'fileQueue',
           'auto'           : true,
           onComplete: function(a, b, c, d, e){
           if (d !== '1')
                alert(d);
           },
           'multi'          : true
     });
});

</script>

</head>

<body>

  <div class="demo">

  <div id="fileQueue"></div>

  <p><strong>Multiple File Upload</strong></p>

  <input type="file" name="uploadify" id="uploadify" />

  <a href="javascript:$('#uploadify').uploadifyUpload();" >Upload Files</a> |

  <a href="javascript:$('#uploadify').uploadifyClearQueue();" >Clear Queue</a>

  </div>

</body>

</html>

Usage

Once the above mentioned steps have been completed you'll be able to upload content to your deployed application. If an error occurs you'll received a JavaScript alert with the server side error message. Enjoy!