Here is the solution that I have made, BalusC helped me a lot to developed it.
Platform and Framework
- Uploadify v3.2
- JSF 1.2
- jQuery 1.8.3
- WebLogic 10.3.5.0
- Apache Commons Fileupload 1.2.2
Problem with multipart request
JSF 1.2 is cannot handle the multipart request. So if the <h:form/>
contains enctype="multipart/form-data"
as attribute then the action
method of command component like <h:commandButton/>
will not fire. The solution is to create a Filter which will work together with Faces Servlet
and handle the mutipart request explicitly. Here is the filter:
package com.mhis.massupload.filter;
import java.io.IOException;
import java.util.Collections;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class MultipartFilter implements Filter {
private FilterConfig filterConfig = null;
public void init(FilterConfig filterConfig) throws ServletException {
this.filterConfig = filterConfig;
}
public void destroy() {
filterConfig = null;
}
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
if (!(request instanceof HttpServletRequest)) {
chain.doFilter(request, response);
return;
}
HttpServletRequest httpRequest = (HttpServletRequest)request;
boolean isMultipartContent = ServletFileUpload.isMultipartContent(httpRequest);
if (!isMultipartContent) {
chain.doFilter(request, response);
return;
}
try {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
upload.setSizeMax(-1);
List<FileItem> items = upload.parseRequest(httpRequest);
final Map<String, String[]> parameterMap = new HashMap<String, String[]>();
for (FileItem item : items) {
if (item.isFormField()) {
processFormField(item, parameterMap);
}
}
chain.doFilter(new HttpServletRequestWrapper(httpRequest) {
public Map<String, String[]> getParameterMap() {
return parameterMap;
}
public String[] getParameterValues(String name) {
return (String[])parameterMap.get(name);
}
public String getParameter(String name) {
String[] params = getParameterValues(name);
if (params == null) {
return null;
}
return params[0];
}
public Enumeration<String> getParameterNames() {
return Collections.enumeration(parameterMap.keySet());
}
}, response);
} catch (Exception ex) {
ServletException servletException = new ServletException();
servletException.initCause(ex);
throw servletException;
}
}
private void processFormField(FileItem formField, Map<String, String[]> parameterMap) {
String name = formField.getFieldName();
String value = formField.getString();
String[] values = parameterMap.get(name);
if (values == null) {
parameterMap.put(name, new String[] { value });
} else {
int length = values.length;
String[] newValues = new String[length + 1];
System.arraycopy(values, 0, newValues, 0, length);
newValues[length] = value;
parameterMap.put(name, newValues);
}
}
}
The configuration of this filter in the web.xml is:
<filter>
<filter-name>MultipartFilter</filter-name>
<filter-class>com.mhis.massupload.filter.MultipartFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>MultipartFilter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
Javasctipt for Uploadify
$('#uploadify').uploadify({
'auto': false,
'buttonText' : 'Browse',
'fileSizeLimit': 0,
'swf': 'uploadify/uploadify.swf',
'uploader': '${pageContext.request.contextPath}/uploadservlet?key=<h:outputText value="#{uploadBean.key}" />',
'onQueueComplete' : function(queueData) {
$('.checkIn').click();
}
});
In my requirement I need to upload all the files when the submit button of the form has been clicked not at then time when the files are added in the queue. That is why I have set 'auto': false
. The uploadify folder has been put inside the Web-Content of my project and for that this plugin was unable to find the uploadify.swf
file and the image of the cancel button. I have to modify the jquery.uploadify.js
's line no 99 and I have changed it as swf: 'uploadify/uploadify.swf'
and also the uploadify.css
's line no 74 and I have changed it to:
.uploadify-queue-item .cancel a {
background: url('../uploadify/uploadify-cancel.png') 0 0 no-repeat;
float: right;
height: 16px;
text-indent: -9999px;
width: 16px;
}
The background
was set to url('../img/uploadify-cancel.png') 0 0 no-repeat;
, but I don't have img folder.
Servlet
For the uploading the files I have used a Servlet
, viz UplaodServlet
; the configuration of this servlet is:
<servlet>
<servlet-name>UploadServlet</servlet-name>
<servlet-class>com.mhis.massupload.servlet.UploadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadServlet</servlet-name>
<url-pattern>/uploadservlet</url-pattern>
</servlet-mapping>
The uploadservlet
has been used as the uploader
attribute of the uploadify
's config. I need also to pass a unique key as request parameter of the Servlet
. The code for the Servlet
is:
package com.mhis.massupload.servlet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.logging.Logger;
import javax.servlet.ServletConfig;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class UploadServlet extends HttpServlet {
@SuppressWarnings("compatibility:-6472602315203858426")
private static final long serialVersionUID = -3714619333861571457L;
private transient Logger log = Logger.getLogger(getClass().getName());
@Override
public void init(ServletConfig config) throws ServletException {
super.init(config);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException {
boolean isMultipartContent = ServletFileUpload.isMultipartContent(request);
if (!isMultipartContent) {
return;
}
FileItem fileField = null;
try {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
upload.setSizeMax(-1);
List<FileItem> items = upload.parseRequest(request);
final Map<String, String[]> parameterMap = new HashMap<String, String[]>();
for (FileItem item : items) {
if (!item.isFormField()) {
fileField = item;
}
}
} catch (Exception ex) {
log.severe(ex.getMessage());
}
if (fileField == null) {
return;
}
String key = request.getParameter("key");
List<FileItem> fileFields = (List<FileItem>)getServletContext().getAttribute(key);
if (fileFields == null) {
fileFields = new ArrayList<FileItem>();
getServletContext().setAttribute(key, fileFields);
}
fileFields.add(fileField);
}
}
I am unable to use Session
to put the information about the uploaded file, so I have used ServletContext
instead. For more info refer here.
JSF page and Upload button
As my need is to upload the files only when the form is submitted after the validation, so I have set 'auto': false
in the configuration of uploadify. But that gave me a trouble, I have posted the issue in my original question. To solve the issue I have declared three input[type=button]
. two of the are ordinary HTML button and the last one is <h:commandButton/>
. I have set the visibility of this <h:commandButton/>
to false and have used a dummy button which will initiate the file upload. When the upload finishes I have programmatically generated the click
of ``. Also I have shown a dummy button which don't have any click event associated with it; this the fail safe if, someone clicks on the Upload button twice during the upload is taking place then the the aforementioned click event fire will work unexpectedly. That why I am showing and hiding the buttons. Here is the completed
.jspx` pag:
<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=utf-8"/>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="uploadify/uploadify.css" type="text/css"/>
<script type="text/javascript">
$(function() {
$('#uploadify').uploadify({
'auto': false,
'buttonText' : 'Browse',
'fileSizeLimit': 0,
'swf': 'uploadify/uploadify.swf',
'uploader': '${pageContext.request.contextPath}/uploadservlet?key=<h:outputText value="#{uploadBean.key}" />',
'onQueueComplete' : function(queueData) {
$('.checkIn').click();
}
});
$('input[name=actualCheckIn]').on('click', function(event){
event.stopPropagation();
$(this).hide();
$('input[name=fakeCheckIn]').show();
$('#uploadify').uploadify('upload','*');
return false;
});
});
var upload = function() {
}
</script>
<title>Upload</title>
</head>
<body>
<h:form enctype="multipart/form-data">
<input id="uploadify" type="file"/>
<h:commandButton value="Check In" action="#{uploadBean.upload}" styleClass="checkIn" style="display: none"/>
<input type="button" value="Check In" name="actualCheckIn"/>
<input type="button" value="Check In" onclick="return false;" name="fakeCheckIn" style="display: none"/>
</h:form>
</body>
</html>
</f:view>
</jsp:root>
By this whay, when the uplaodify finishes it's upload to the servlet the acution JSF's is fired.
Managed Bean
The managed bean has the scoped Session
and here is the code of it:
package com.mhis.massupload.bean;
import com.mhis.massupload.dto.DocInfo;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;
import oracle.stellent.ridc.IdcClientException;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.lang3.StringUtils;
public class UploadBean implements Serializable {
@SuppressWarnings("compatibility:-930710930183135088")
private static final long serialVersionUID = -491462816764274947L;
private transient Logger log = Logger.getLogger(getClass().getName());
private String key;
private transient Service service;
public UploadBean() throws IdcClientException {
init();
}
private void init() throws IdcClientException {
key = UUID.randomUUID().toString();
}
public String upload() {
List<FileItem> fileFields = (List<FileItem>) FacesContext.getCurrentInstance().getExternalContext().getApplicationMap().remove(key);
List<DocInfo> docInfos = new ArrayList<DocInfo>();
if (fileFields != null) {
for (FileItem fileField : fileFields) {
if(StringUtils.isNotBlank(fileField.getName())) {
try {
System.out.println("Check in: " + fileField.getName());
} catch (Exception e) {
log.log(Level.SEVERE, e.getMessage());
}
}
}
}
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("docInfos", docInfos);
return "report";
}
public void setKey(String key) {
this.key = key;
}
public String getKey() {
return key;
}
}
This worked like charm.
Hope it would be helpful.