I have seen that we can upload multiple files by flash file upload. Like SWFUpload or YUI Uploader. Is it possible to integrate these upload component with JSF?
What I want is to choose multiple file at once. Primefaces file uploader has this feature, but that don't work in IE7 as IE7 don't have any support for HTML5.
I need to create a Form with various fields, like dropdown menu, text input etc and also need to add a file uploader for choosing multiple file. When the JSF submit button will be clicked the Form will be validated and it will proceed after.
I have created a page for uploading multiple file, but that page use multiple input file component for multiple file.
Any reference would be very helpful for me. I have found another SO thread and the solution posted there use JSP. I cannot understand how can I use this to fulfill my requirement.
I have created the following managed bean:
import com.mhis.massupload.ucm.Service;
import java.util.List;
import java.util.UUID;
import java.util.logging.Logger;
import javax.faces.context.FacesContext;
import org.apache.commons.fileupload.FileItem;
public class UploadBean {
private Logger log = Logger.getLogger(getClass().getName());
private Service service;
private String key;
public UploadBean() {
super();
log.info("JYM");
init();
}
private void init() {
key = UUID.randomUUID().toString();
}
public String upload() {
System.out.println("Action Invoked.");
List<FileItem> fileFields = (List<FileItem>)FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get(key);
System.out.println(fileFields);
return "";
}
public void setKey(String key) {
this.key = key;
}
public String getKey() {
return key;
}
}
And the Servlet is:
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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:-3560436533054762606")
private static final long serialVersionUID = 4122845079663279030L;
public void init(ServletConfig config) throws ServletException {
super.init(config);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("UploadServlet invoked.");
List<FileItem> fileFields = new ArrayList<FileItem>();
try {
List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
for (FileItem item : items) {
if (!item.isFormField()) {
fileFields.add(item);
System.out.println(item.getName());
}
}
} catch (Exception e) {
throw new ServletException(e);
}
String key = request.getParameter("key");
request.getSession().setAttribute(key, fileFields);
}
}
The jspx page:
<?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;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">
$(document).ready(function() {
$('#uploadify').uploadify({
'swf': 'uploadify/uploadify.swf',
'uploader': '${pageContext.request.contextPath}/uploadServlet;jsessionid=${pageContext.session.id}?key=<h:outputText value="#{uploadBean.key}" />'
});
});
var upload = function() {
$('#uploadify').uploadify('upload','*');
}
</script>
<title>test</title>
</head>
<body>
<h:form enctype="multipart/form-data">
<input id="uploadify" type="file"/>
<h:commandLink action="#{uploadBean.upload}" value="Upload" />
</h:form>
</body>
</html>
</f:view>
</jsp:root>
I am using Uploadify here.
I am having two issues:
The List<FileItem> fileFields of the upload method is sometime returning null, sometime showing the list. I am unable to find the reason. I have tried to get the HttpSession from the action method by FacesContext.getCurrentInstance().getExternalContext().getSession(false) and then called getAttribute() upon it, that is also always returning null.
If I set 'auto': false, that is the file upload will launch after calling upload(); method and modify the <h:commandLink/> as: <h:commandLink action="#{uploadBean.upload}" value="Upload" onclick="upload();"/> then I am getting exception, which is:
org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed. EOF after reading only: '2392369' of: '11626364' promised bytes, out of which at least: '0' were already buffered
at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:367)
at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
at com.edfx.massupload.servlet.UploadServlet.doPost(UploadServlet.java:33)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:727)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:820)
at weblogic.servlet.internal.StubSecurityHelper$ServletServiceAction.run(StubSecurityHelper.java:227)
at weblogic.servlet.internal.StubSecurityHelper.invokeServlet(StubSecurityHelper.java:125)
at weblogic.servlet.internal.ServletStubImpl.execute(ServletStubImpl.java:300)
at weblogic.servlet.internal.TailFilter.doFilter(TailFilter.java:26)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:56)
at oracle.security.jps.ee.http.JpsAbsFilter$1.run(JpsAbsFilter.java:119)
at java.security.AccessController.doPrivileged(Native Method)
at oracle.security.jps.util.JpsSubject.doAsPrivileged(JpsSubject.java:315)
at oracle.security.jps.ee.util.JpsPlatformUtil.runJaasMode(JpsPlatformUtil.java:442)
at oracle.security.jps.ee.http.JpsAbsFilter.runJaasMode(JpsAbsFilter.java:103)
at oracle.security.jps.ee.http.JpsAbsFilter.doFilter(JpsAbsFilter.java:171)
at oracle.security.jps.ee.http.JpsFilter.doFilter(JpsFilter.java:71)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:56)
at oracle.dms.servlet.DMSServletFilter.doFilter(DMSServletFilter.java:139)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:56)
at weblogic.servlet.internal.RequestEventsFilter.doFilter(RequestEventsFilter.java:27)
at weblogic.servlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:56)
at weblogic.servlet.internal.WebAppServletContext$ServletInvocationAction.wrapRun(WebAppServletContext.java:3715)
at weblogic.servlet.internal.WebAppServletContext$ServletInvocationAction.run(WebAppServletContext.java:3681)
at weblogic.security.acl.internal.AuthenticatedSubject.doAs(AuthenticatedSubject.java:321)
at weblogic.security.service.SecurityManager.runAs(SecurityManager.java:120)
at weblogic.servlet.internal.WebAppServletContext.securedExecute(WebAppServletContext.java:2277)
at weblogic.servlet.internal.WebAppServletContext.execute(WebAppServletContext.java:2183)
at weblogic.servlet.internal.ServletRequestImpl.run(ServletRequestImpl.java:1454)
at weblogic.work.ExecuteThread.execute(ExecuteThread.java:209)
at weblogic.work.ExecuteThread.run(ExecuteThread.java:178)
And also in this case the action method is executing before the servlet get executed.
How can I solve these two issues?
I need to modify the uploadify.js to set the correct path of the swf file and changed the css for the cancel-button. I have placed the whole directory of the uploadify inside Web-Content.
You're going to need a servlet for this. I've answered a Uploadify + Servlet question before which should give sufficient clues: Uploadify plugin doesn't call Java Servlet. The concept is not that different for SWFUpload and YUI Uploader. Note that you can just put plain HTML in a JSF page without problems.
Your main problem is enabling the JSF backing bean and the HTTP servlet to exchange data with each other. For this the HTTP session should be used. First let the JSF bean on initial request generate an unique key which is to be used as session attribute name:
key = UUID.randomUUID().toString();
Then, in the upload URL which you tell Uploadify/SWFUpload/etc to use, you need to include the jsessionid URL fragment (so that the servlet will use the same HTTP session) and the keyas URL query string parameter (so that the servlet will use this key to store relevant state about the file upload). Assuming that you need to specify it as a JS object key:
url: '${pageContext.request.contextPath}/uploadServlet;jsessionid=${pageContext.session.id}?key=<h:outputText value="#{uploadBean.key}" />'
Now, the servlet will be invoked within the same HTTP session (i.e. request.getSession() will be exactly the same one as available in JSF by ExternalContext#getSession() and its attributes by getSessionMap()). So, in doPost() just do:
String key = request.getParameter("key");
request.getSession().setAttribute(key, someStateAboutTheUpload);
Finally, when JSF is about to process the form submit, just get the desired data by the key (which you store for the subsequent request by <input type="hidden"> or <t:saveState> in case of a request scoped bean):
SomeState someState = (SomeState) externalContext.getSessionMap().get(key);
The unique key is not necessary for the functioning, it can even be a static key, but a on per-view basis generated key ensures that the data doesn't clash when the enduser has the same view open in multiple browser tabs/windows in the same session.