I got an opportunity to integrate jquery uploadify with spring MVC 3.
I hope you should have basic knowledge about spring MVC , JQuery and Maven 2.
Iam using netbeans 6.9 as my development environment. I created example code (uploaded below) as maven project so it will be IDE independent . All dependencies i created in pom file .
Iam using jquery-1.4.2 and uploadify plugin for doing multiple attachment(http://www.uploadify.com/)
Browser needs to be flash enabled to work with uploadify plugin
following are dependencies for the above project.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.mycompany</groupId> <artifactId>Upload</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>Upload JEE5 Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.1</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-asm</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-expression</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-instrument</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-instrument-tomcat</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jms</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-oxm</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc-portlet</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-struts</artifactId> <version>3.0.2.RELEASE</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>2.0.2</version> <configuration> <source>1.5</source> <target>1.5</target> </configuration> </plugin> </plugins> <finalName>Upload</finalName> </build> </project>
Below spring mvc configurarion dispatcher servlet in web-inf\dispatcher-servelet.xml
All url mapping are done in dispatcher servlet and configuraion for multi part resolver for uploading the file in spring mvc.
<code>
<?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"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes -->
<property name="maxUploadSize" value="100000"/>
</bean>
<!--
Most controllers will use the ControllerClassNameHandlerMapping above, but
for the index controller we are using ParameterizableViewController, so we must
define an explicit mapping for it.
-->
<bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<property name="mappings">
<props>
<prop key="index.htm">indexController</prop>
<prop key="upload.htm">upload</prop>
</props>
</property>
</bean>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/jsp/"
p:suffix=".jsp" />
<!--
The index controller.
-->
<bean name="indexController"
class="org.springframework.web.servlet.mvc.ParameterizableViewController"
p:viewName="index" />
<bean name="upload" class="net.john.controller.UploadController" />
</beans>
</code>
Following are the code in upload.jsp
Its included all scripts libraries needed for jquery and uplodify.
Please note that i hard coded the url for upload script if your server name or port are different change your upload script path.
<script type="text/javascript">
$(document).ready(function() {
$('#upload').click(function() {
$('#uploadify').uploadifyUpload();
return false;
});
$('#uploadify').uploadify({
'uploader': './lib/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'http://localhost:8084/Upload/upload.htm',
'multi': true,
'auto' : true,
'cancelImg': './lib/jquery.uploadify-v2.1.0/cancel.png'
});
});
</script>
following are the full source code for upload.jsp
<%--
Document : upload
Created on : Sep 10, 2010, 3:36:23 AM
Author : lenovo
--%>
<%@page contentType="text/html;charset=UTF-8" %>
<%@page pageEncoding="UTF-8" %>
<%@ page session="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<base href=http://localhost:8084/Upload/" />
<link rel="stylesheet" href="./lib/jquery/css/custom-theme/jquery-ui-1.8.4.custom.css" type="text/css" media="all" />
<script src="./lib/jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="./lib/jquery/js/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="./lib/jquery/js/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="./lib/jquery/js/jquery.plugin.cookie.js" type="text/javascript"></script>
<script src="./lib/jquery/js/jquery.effects.core.min.js" type="text/javascript"></script>
<script src="./lib/jquery/js/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script src="./lib/jquery/js/jquery.ui.button.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./lib/jquery.uploadify-v2.1.0/swfobject.js"></script>
<script type="text/javascript" src="./lib/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#upload').click(function() {
$('#uploadify').uploadifyUpload();
return false;
});
$('#uploadify').uploadify({
'uploader': './lib/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'http://localhost:8084/Upload/upload.htm',
'multi': true,
'auto' : true,
'cancelImg': './lib/jquery.uploadify-v2.1.0/cancel.png'
});
});
</script>
</head>
<body>
<input id="uploadify" type="file">
<form:form modelAttribute="uploadbean" method="post" enctype="multipart/form-data">
</form:form>
</body>
</html>
I used the following model in the controller. Model will hold file.
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package net.john.model;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
/**
*
* @author lenovo
*/
public class UploadBean {
private CommonsMultipartFile filedata;
private String name;
public CommonsMultipartFile getFiledata() {
return filedata;
}
public void setFiledata(CommonsMultipartFile filedata) {
this.filedata = filedata;
}
}
Finally UploadController post functions will uploading the file into server.
You will get commonsmultipartfile to upload into server or database.
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package net.john.controller;
import net.john.model.UploadBean;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
*
* @author lenovo
*/
@Controller
public class UploadController {
public UploadController() {
}
@RequestMapping(method = RequestMethod.GET)
public String getUploadForm(Model model)
{
model.addAttribute("uploadbean", new UploadBean());
return "forms/upload";
}
@RequestMapping(method = RequestMethod.POST)
public String Uploadcreate(UploadBean uploadbean, BindingResult result)
{
System.out.println("started uploading");
if (result.hasErrors())
{
for(ObjectError error : result.getAllErrors())
{
System.err.println("Error in uploading: " + error.getCode() + " - " + error.getDefaultMessage());
}
return "forms/upload";
}
// Some type of file processing...
System.err.println("-------------------------------------------");
System.err.println("Test uploading file: " + uploadbean.getFiledata().getOriginalFilename());
System.err.println("-------------------------------------------");
return "forms/success";
}
}
If everything works fine you able to upload multiple files as follows .
Maven Project Demo uploaded as follows
http://www.mediafire.com/?3s6hvjf74c3zsm7
Great tutorial, just one remark: don’t forget to include uploadify plugins own css, so nice progress bars coming to life. Just add to of ‘upload.jsp’:
To upgrade the look simply replace ‘jquery.uploadify-v2.1.0′ folder with the most recent version.
Sorry, WP tricked me. Second shot:
Gave up…
One more thing: do you have any special reason to include things like ‘base’ and ‘localhost’ in upload.jsp?
Works fine using JSTL’s c:url combined with relative path’s only, no need for ‘localhost’.
Thanks for your comments.
its just tutorial documents . i used base so i can refer any places the base url .
Normally i used sitemesh. so i can generate base url dynamically.
d(^_^)b nice…
Thanks for ur comment
Thanks for reading…
Hi,
shall I use liferay plugin properties file instead of maven? I don’t know how .pom file can be used with Liferay . I am going to use uploadify in a spring portlet in liferay poratl.
I am not sure how it will work in liferay plug in . As you are using spring port let so all dependencies for spring i hope already there.
Only thing you need copy into javascript files .
currently the spring dependency jar file is added to web-inf/lib folder.
How can i download the complete project for the sample code?
Source code already given as maven project just download and mvn clean install
am not able to download from this link http://www.mediafire.com/?3s6hvjf74c3zsm7
. Is it shared any other place?
its shared in mediafire. Link will work if ur firewall not blocked
can i have the complete files for this example… please send a zip file or attach it in this blog.
Its already uploaded in the mediafire . as its maven project you need to clean and install from your ide or terminal .
http://www.mediafire.com/?3s6hvjf74c3zsm7