title: To upload a file using richfaces
body: <p>In RichFaces, inorder to upload a file I used <code>rich:fileUpload</code>. By using <code>rich:fileUpload</code> Add, Upload and Clear All buttons are automatically generating in the  richfaces livedemo example but for me Add, Upload and Clear All are appearing as text in my browser where should I change so that Add,upload and clearAll can be clickable. Do I have to change any settings in <code>web.xml</code> / <code>pom.xml</code> file. </p>
  
  <p>I am using RichFaces 4 and JSF 2.</p>
  
  <p>This is my web.xml :</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"&gt;
  &lt;display-name&gt;Sample RichFaces 4 Application&lt;/display-name&gt;
  &lt;context-param&gt;
      &lt;param-name&gt;javax.faces.PROJECT_STAGE&lt;/param-name&gt;
      &lt;param-value&gt;Development&lt;/param-value&gt;
  &lt;/context-param&gt;
  &lt;context-param&gt;
      &lt;param-name&gt;javax.faces.SKIP_COMMENTS&lt;/param-name&gt;
      &lt;param-value&gt;true&lt;/param-value&gt;
  &lt;/context-param&gt;
  &lt;context-param&gt;
      &lt;param-name&gt;org.richfaces.skin&lt;/param-name&gt;
      &lt;param-value&gt;#{skinBean.skin}&lt;/param-value&gt;
  &lt;/context-param&gt;
  &lt;context-param&gt;
      &lt;param-name&gt;org.richfaces.fileUpload.maxRequestSize&lt;/param-name&gt;
      &lt;param-value&gt;1000000000&lt;/param-value&gt;
  &lt;/context-param&gt;
  &lt;context-param&gt;
      &lt;param-name&gt;org.richfaces.fileUpload.createTempFiles&lt;/param-name&gt;
      &lt;param-value&gt;true&lt;/param-value&gt;
  &lt;/context-param&gt;
  &lt;listener&gt;
      &lt;listener-class&gt;com.sun.faces.config.ConfigureListener&lt;/listener-class&gt;
  &lt;/listener&gt;
  &lt;servlet&gt;
      &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
      &lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;
      &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
  &lt;/servlet&gt;
  &lt;servlet-mapping&gt;
      &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
      &lt;url-pattern&gt;*.jsf&lt;/url-pattern&gt;
  &lt;/servlet-mapping&gt;
  &lt;session-config&gt;
      &lt;session-timeout&gt;30&lt;/session-timeout&gt;
  &lt;/session-config&gt;
  &lt;mime-mapping&gt;
      &lt;extension&gt;ecss&lt;/extension&gt;
      &lt;mime-type&gt;text/css&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  &lt;welcome-file-list&gt;
      &lt;welcome-file&gt;index.jsf&lt;/welcome-file&gt; 
  &lt;/welcome-file-list&gt;
  &lt;login-config&gt;
      &lt;auth-method&gt;BASIC&lt;/auth-method&gt;
  &lt;/login-config&gt;
  </code></pre>
  
  <p></p>
  
  <p>Hi, i am getting those add and update buttons now correctly by simply providing h:head and h:body tags  but i am getting this exception javax.faces.event.AbortProcessingException and files are not being uploaded as shown in the example provided in the link "<a href="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf" rel="nofollow">FileUpload example</a>".Can anyone plz help me out from this issue</p>
  
  <p>This is my xhtml page</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;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"&gt;
  
  
  
  &lt;ui:composition&gt;
   &lt;h:head&gt;
   &lt;h:outputStylesheet&gt;
      .top {
      vertical-align: top;
      }
  .info {
      height: 202px;
      overflow: auto;
      }
  &lt;/h:outputStylesheet&gt;
  &lt;/h:head&gt;
  &lt;h:body&gt;
  &lt;h:form&gt;
      &lt;h:panelGrid columns="2" columnClasses="top,top"&gt;
          &lt;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"&gt;
              &lt;a4j:ajax event="uploadcomplete" execute="@none" render="info" /&gt;
          &lt;/rich:fileUpload&gt;
          &lt;h:panelGrid id="info" layout="block"&gt;
              &lt;rich:panel bodyClass="info"&gt;
                  &lt;f:facet name="header"&gt;
                      &lt;h:outputText value="Uploaded Files Info" /&gt;
                  &lt;/f:facet&gt;
                  &lt;h:outputText value="No files currently uploaded" rendered="#{fileUploadBean.size==0}" /&gt;
                  &lt;rich:dataGrid columns="1" value="#{fileUploadBean.files}" var="file" rowKeyVar="row"&gt;
                      &lt;rich:panel bodyClass="rich-laguna-panel-no-header"&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}"
                                  value="#{row}" style="width:100px; height:100px;" cacheable="false"&gt;
                                  &lt;f:param value="#{fileUploadBean.timeStamp}" name="time" /&gt;
                              &lt;/a4j:mediaOutput&gt;
                              &lt;h:panelGrid columns="2"&gt;
                                  &lt;h:outputText value="File Name:" /&gt;
                                  &lt;h:outputText value="#{file.name}" /&gt;
                                  &lt;h:outputText value="File Length(bytes):" /&gt;
                                  &lt;h:outputText value="#{file.length}" /&gt;
                              &lt;/h:panelGrid&gt;
                          &lt;/h:panelGrid&gt;
                      &lt;/rich:panel&gt;
                  &lt;/rich:dataGrid&gt;
              &lt;/rich:panel&gt;
              &lt;br/&gt;
              &lt;a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data"
                  rendered="#{fileUploadBean.size&gt;0}" /&gt;
          &lt;/h:panelGrid&gt;
      &lt;/h:panelGrid&gt;
  &lt;/h:form&gt;
  &lt;/h:body&gt;
  &lt;/ui:composition&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>This is my FileUploadBean Class</p>
  
  <pre><code>package com.acc.upload;
  
  import java.io.IOException;
  
  import java.io.OutputStream;
  import java.util.ArrayList;
  
  import javax.faces.bean.ManagedBean;
  import javax.faces.bean.SessionScoped;
  
  import com.acc.fileupload.utils.FileUploadEvent;
  import com.acc.fileupload.utils.UploadedFile;
  
  
  @ManagedBean(name = "fileUploadBean")
  @SessionScoped
  public class FileUploadBean{
  
  private ArrayList&lt;File&gt; files = new ArrayList&lt;File&gt;();
  private int uploadsAvailable = 5;
  private boolean autoUpload = false;
  private boolean useFlash = true;
  
  
  public int getSize() {
      if (getFiles().size()&gt;0){
          return getFiles().size();
      }else 
      {
          return 0;
      }
  }
  
  public FileUploadBean() {
  }
  
  public void paint(OutputStream stream, Object object) throws IOException {
      stream.write(getFiles().get((Integer)object).getData());
  }
  public void listener(FileUploadEvent event) throws Exception{
      UploadedFile item = event.getUploadedFile();
      File file = new File();
      file.setLength(item.getData().length);
      file.setName(item.getName());
      file.setData(item.getData());
      files.add(file);
      uploadsAvailable--;
  }  
  
  public String clearUploadData() {
      files.clear();
      setUploadsAvailable(5);
      return null;
  }
  
  public long getTimeStamp(){
      return System.currentTimeMillis();
  }
  
  public ArrayList&lt;File&gt; getFiles() {
      return files;
  }
  
  public void setFiles(ArrayList&lt;File&gt; files) { 
      this.files = files;
  }
  
  public int getUploadsAvailable() {
      return uploadsAvailable;
  }
  
  public void setUploadsAvailable(int uploadsAvailable) {
      this.uploadsAvailable = uploadsAvailable;
  }
  
  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;
  }
  
  }
  </code></pre>
  
  <p>File Class</p>
  
  <pre><code>package com.acc.upload;
  
  public class File {
  
  private String Name;
  private String mime;
  private long length;
  private byte[] data;
  public byte[] getData() {
      return data;
  }
  public void setData(byte[] data) {
      this.data = data;
  }
  public String getName() {
      return Name;
  }
  public void setName(String name) {
      Name = name;
      int extDot = name.lastIndexOf('.');
      if(extDot &gt; 0){
          String extension = name.substring(extDot +1);
          if("png".equals(extension)){
              mime="image/png";
          }else {
              mime = "img/unknown";
          }
      }
  }
  public long getLength() {
      return length;
  }
  public void setLength(long length) {
      this.length = length;
  }
  
  public String getMime(){
      return mime;
  }
  }
  </code></pre>
  
  <p>Thanks a lot.Now that error is gone for me .
   I set the createTemp files to true in web.xml but i am unable to find the uploaded file in the temp folder in my local system.And also is it possible to store the uploaded file to a desired location in our local system by changing any settings in web.xml file ?
   Please help in these two issues.</p>