PrimeFaces: File Upload View Not Updating

Question

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>

Can you reproduce the problem on showcase? If not, post a MCVE and try to elaborate the problem in developer's perspective, not in enduser's perspective. And please don't make assumptions on the browser as long as you actually haven't tried other browsers. — BalusC
I did change the version of PromieFaces to 5.2 and the browse button does change to the standard choose button. Still the single view still does not show the file after selection. @BalusC — wwjdm

Gokhan Dilek Gokhan Dilek · Accepted Answer · 2017-02-25T07:57:03

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.

PrimeFaces: File Upload View Not Updating

1 Answers