Search code examples
jsf-2primefaces

PrimeFaces: File Upload View Not Updating

I have setup a JSF project using spring security. I am trying to get the FileUpload PrimeFaces to show the selected file after the user finishes browsing to the file.

I am using:

http://www.primefaces.org/showcase/ui/file/upload/single.xhtml

enter image description here

The problem is that after selection of a file nothing is shown in the view and the upload button will not be highlighted. Any help? I did try the basic file upload and it does update the file name in the view

For basic view http://www.primefaces.org/showcase/ui/file/upload/basic.xhtml

enter image description here

Could it be FireFox version I use v31.0?

<?xml version='1.0' encoding='UTF-8' ?>
<!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:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>

<h:body>

<h:form enctype="multipart/form-data">
  <p:growl id="messages" showDetail="true" />
  <p:fileUpload value="#{fileUploadController.file}" mode="simple"     skinSimple="true"/>
  <p:commandButton value="Submit" ajax="false" actionListener="#{fileUploadController.upload}" disabled="false" />
</h:form>

<h:form enctype="multipart/form-data">
  <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}" mode="advanced" dragDropSupport="false"
       update="messages" sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(txt|gif|jpe?g|png)$/" />
   <p:growl id="messages" showDetail="true" />
</h:form>

</h:body>
</html>

I do have this as well in my web.xml:

<!-- PrimeFaces Client Side Validation -->
<context-param>
 <param-name>primefaces.CLIENT_SIDE_VALIDATION</param-name>
 <param-value>true</param-value>
</context-param>
<filter>
 <filter-name>PrimeFaces FileUpload Filter</filter-name>
 <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
 <filter-name>PrimeFaces FileUpload Filter</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

POM:

    <!-- PrimeFaces -->
    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>5.2</version>
        <scope>compile</scope>
    </dependency>
Solution

  • I had a similar problem before. When you define your file upload component, make sure the fileupload component is unique. Get the id from your javaBeans.

    Regarding the file name, it is a CSS issue. If you open your inspector and dig through layers and layers of <tb> tags, you should see the name of your file. Tweak with your CSS to make the name visible.