5 Replies Latest reply on Jun 29, 2012 12:52 PM by Ernesto Hernandez

    rich:fileUpload is not working

    Ernesto Hernandez Newbie

      Hi guys!

       

      I'm trying to use the rich:fileUpload component but it doesn't work right now. I have taken the code exactly from the RichFaces Showcase but the problem is that the listener is not working, the call to the listener it's never done. As the matter of fact, the style or look and feel of the component is kind of weird.

       

      I'm using richfaces 4.2 and JSF 2.0.

      FileUploadImage.JPG

       

      This is the Java class:

       

      /**
       * @author Ilya Shaikovsky
       */
      @ManagedBean(name="fileUploadBean")
      @SessionScoped
      public class FileUploadBean implements Serializable {
        
                private static final long serialVersionUID = -5106419770561110133L;
        
                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;
          }
      }
      
      

       

      And this is my FileUpload.xhtml file:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <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>
              <h:panelGrid columns="2" columnClasses="top,top">
                  <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">
                      <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:panelGrid>
          </h:form>
      </ui:composition>
      
      </html>
      
      

       

      I wish somebody can help me out with this. I have looked for some solution but most of the posts I have read are about richfaces 3.3.

       

      Thanks in advance! = )