The rich:fileUpload component allows you to upload files from the users machine to the server with various options.
This example allows you to upload files to the demo server. The number of files allowed at once is managed with the maxFilesQuantity attribute. Every uploaded file will be processed with a fileUploadListener which is called after every single file upload operation is finished.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <ui:composition> <h:outputStylesheet> .top { vertical-align: top; } .info { height: 202px; overflow: auto; } </h:outputStylesheet> <h:form id="form"> <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes=".jpg, .gif, .png, .bmp" ontyperejected="alert('Only JPG, GIF, PNG and BMP files are accepted');" maxFilesQuantity="5"> <a4j:ajax event="uploadcomplete" execute="@none" render="info" /> </rich:fileUpload> <h:panelGroup id="info" layout="block" style="width: 400px; margin-top: 10px"> <rich:panel bodyClass="info"> <f:facet name="header"> <h:outputText value="Uploaded Files Info" /> </f:facet> <h:outputText value="No files currently uploaded" rendered="#{fileUploadBean.size==0}" /> <rich:dataGrid columns="1" value="#{fileUploadBean.files}" var="file" rowKeyVar="row"> <rich:panel bodyClass="rich-laguna-panel-no-header"> <h:panelGrid columns="2"> <a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false"> <f:param value="#{fileUploadBean.timeStamp}" name="time" /> </a4j:mediaOutput> <h:panelGrid columns="2"> <h:outputText value="File Name:" /> <h:outputText value=" #{file.name}" /> <h:outputText value="File Length(bytes):" /> <h:outputText value=" #{file.length}" /> </h:panelGrid> </h:panelGrid> </rich:panel> </rich:dataGrid> </rich:panel> <br /> <a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" /> </h:panelGroup> </h:form> </ui:composition> </html>
package org.richfaces.demo.fileupload; import java.io.IOException; import java.io.OutputStream; import java.io.Serializable; import java.util.ArrayList; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import org.richfaces.event.FileUploadEvent; import org.richfaces.model.UploadedFile; /** * @author Ilya Shaikovsky */ @ManagedBean @SessionScoped public class FileUploadBean implements Serializable { private ArrayList<UploadedImage> files = new ArrayList<UploadedImage>(); public void paint(OutputStream stream, Object object) throws IOException { stream.write(getFiles().get((Integer) object).getData()); stream.close(); } public void listener(FileUploadEvent event) throws Exception { UploadedFile item = event.getUploadedFile(); UploadedImage file = new UploadedImage(); file.setLength(item.getData().length); file.setName(item.getName()); file.setData(item.getData()); files.add(file); } public String clearUploadData() { files.clear(); return null; } public int getSize() { if (getFiles().size() > 0) { return getFiles().size(); } else { return 0; } } public long getTimeStamp() { return System.currentTimeMillis(); } public ArrayList<UploadedImage> getFiles() { return files; } public void setFiles(ArrayList<UploadedImage> files) { this.files = files; } }
FileUpload requires two context-parameter's to be set in web.xml:
