The RichFaces Web Framework provides a powerful and flexible fileupload component to handle user triggered file uploads inside a web application.
To read more about the the RichFaces Fileupload see the online example.
You can use this RichFaces component in conjunction with the Imixs Workflow components in an easy way using the Imixs BLOBWorkitems. BLOBWorkitems can be used to save large binary data like photos, videos or richtext together with a workflow item. Read more about the BLOBWOrktiems on the Imixs JSF-Tools page.
The following example shows how to integrate the RichFaces Fileupload Component into a jsf form page:
<a4j:outputPanel id="attachment_info_id" layout="block"
style="float: left; min-width: 380px;" >
<h:dataTable id="attachmentlist_id" var="attachment"
styleClass="data" rowClasses="bals, even" style="min-width:360px;"
value="#{workitemBlobMB.files}">
<h:column style="border:0">
<f:facet name="header">
<h:outputText value="File Name" />
</f:facet>
<h:outputText escape="false" value="<a target='_balnk' href='" />
<h:outputText escape="false"
value="#{facesContext.externalContext.requestContextPath}/RestService/workflow/#{workitemBlobMB.item['$uniqueID']}/#{attachment}" />
<h:outputText escape="false" value="'>#{attachment}</a>" />
</h:column>
<!-- delete action -->
<h:column style="border:0">
<f:facet name="header">
<h:outputText value="Aktion" />
</f:facet>
<a4j:commandLink reRender="attachmentlist_id,upload"
title="#{global.delete}" actionListener="#{reportMB.doDeleteFile}"
style="text-decoration:none;">
<h:graphicImage border="0" url="/layout/img/remove.gif" />
<f:param name="filename" value="#{attachment}" />
</a4j:commandLink>
</h:column>
</h:dataTable>
</a4j:outputPanel>
<div style="float: left; min-width: 350px; margin-left: 20px;">
<rich:fileUpload listWidth="345px;" fileUploadListener="#{fileUploadBean.listener}"
listHeight="100px"
maxFilesQuantity="#{fileUploadBean.uploadsAvailable}" id="upload"
immediateUpload="#{fileUploadBean.autoUpload}"
allowFlash="false">
<a4j:support event="onclear">
<a4j:actionparam name="fname" noEscape="true" value="(event.memo.entry)?event.memo.entry.fileName:'' "
assignTo="#{fileUploadBean.fileName}"
actionListener="#{fileUploadBean.clearUploadData}"/>
</a4j:support>
</rich:fileUpload>
</div>
The files uploaded by the user are managed by the FileHandlerBean. This is an backing bean which holds just uploaded files and stores them into the BLOBWorkitem. The goal is to store the uploaded files just when the user submits the hole form. Stored files are available by the property “Files” from the BLOBWorkitemBean as you can see in the example.
This is the code of the FileHandler used in this example:
public class FileUploadBean {
private ArrayList<String> filesUploaded = new ArrayList<String>();
private int maxAttachments = 10;
private boolean autoUpload = true;
private boolean useFlash = false;
private String fileName;
private BLOBWorkitemController workitemBlobMB = null;
public FileUploadBean() {
}
public void reset() {
filesUploaded = new ArrayList<String>();
}
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
System.out.println("Filname is updates:" + fileName);
this.fileName = fileName;
}
/**
* adds a uploaded file into the blobBean
*
* @param event
* @throws Exception
*/
public void listener(UploadEvent event) throws Exception {
UploadItem item = event.getUploadItem();
this.getWorkitemBlobBean().addFile(item.getData(), item.getFileName(),
item.getContentType());
filesUploaded.add(item.getFileName());
}
/**
* clears on file from the actual uploaded (but not yet saved) files. The
* current selected filename is assigned by an a4j:actionparam to the
* property 'fileName'; If filename==null all uploaded files will be removed
*
* @see https://community.jboss.org/message/537903#537903
* @return
*/
public void clearUploadData(ActionEvent event) {
try {
// test if a single file was cleared....
if (fileName != null && !"".equals(fileName)) {
System.out.println("Removing single fileName=" + fileName);
this.getWorkitemBlobBean().removeFile(fileName);
filesUploaded.remove(fileName);
}
else {
// remove all files form fileUploadBean...
Iterator<String> iter = filesUploaded.iterator();
System.out.println("Removing all files....");
while (iter.hasNext()) {
String s = iter.next();
System.out.println("Removing fileName=" + s);
this.getWorkitemBlobBean().removeFile(s);
}
filesUploaded.clear();
}
} catch (Exception e) {
e.printStackTrace();
}
}
public long getTimeStamp() {
return System.currentTimeMillis();
}
/**
* Defines the maximum count of attachments for one workitem.
*
* @param iMaxCount
*/
public void setMaxAttachmetns(int iMaxCount) {
maxAttachments = iMaxCount;
}
/**
* compute the possible uploads available. = (maxAttachments - current
* attachmetns)
*
* @return
*/
public int getUploadsAvailable() {
return maxAttachments - this.getWorkitemBlobBean().getFiles().length;
}
public boolean isAutoUpload() {
return autoUpload;
}
public void setAutoUpload(boolean autoUpload) {
this.autoUpload = autoUpload;
}
public boolean isUseFlash() {
return useFlash;
}
public void setUseFlash(boolean useFlash) {
this.useFlash = useFlash;
}
private BLOBWorkitemController getWorkitemBlobBean() {
if (workitemBlobMB == null)
workitemBlobMB = (BLOBWorkitemController) FacesContext
.getCurrentInstance().getApplication().getELResolver()
.getValue(FacesContext.getCurrentInstance().getELContext(),
null, "workitemBlobMB");
return workitemBlobMB;
}
}
There are two interesting methods. The listener() Method is used to overtake a just uploaded file from the richfaces fileupload widget and store this into the BLOBWorkitem. The BLOBWorktiem simply holds a HashMap with all the data of uploaded files and stores the file data into the database using the Imixs Entity Manager.
The other important method is the clearUploadData(). This method removes an uploaded file. This can happen if the user clicks on the clear link or the “Clear all” button of the fileupload control. In this case the method removes one or all files so these files will not be saved to the database later when the user submits the form. Notice that in this code example a new uploaded file will only be stored into the backend database if the user saves the form. This can be handled by the Imixs Workflow Manager very easily. See the following code snippet from doProcess method of a backing bean:
public void doProcessWorkitem(ActionEvent event) throws Exception {
super.doProcessWorkitem(event);
// save also attachments now
getWorkitemBlobBean().save(workitemItemCollection);
getFileUploadMB().reset();
}
So in conjunction with the Imixs BLOBWorkitem the RichFaces Fileupload Widget is a valuable and very powerfull jsf component.