JSF FileUpload doesnt work when using ui:define

Question

Heyho,

I got a problem writing a JSF-Application using PrimeFaces (6.0). The problem is that when I use templating (ui:define), then the FileUpload in my application will refuse to work. When I build the same page without templating (same structure, basically using the template and inserting the example code) it works like a charm. Both pages are the same (compared the output) BUT using templating I get the following warning-message in browser-console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Any ideas what is causing this error when using ui:define? As I mentioned the output when using no template is the same as with but without it's working so I exclude an error in my code in general.

My template looks like this (removed uninteresting parts):

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">

  <h:head>
    ...
  </h:head>

  <h:body>
    <nav>
      ...
    </nav>

    <div class="wrapper">
        <header>
            <div class="header-title">
                ...
            </div>
            <div class="header-navbar">
                ...
            </div>

        </header>
        <div class="container">
            <div id="content" class="center_content">
                <ui:insert name="content">Content</ui:insert>  
            </div>
            <footer>
                ...
            </footer>
        </div>
    </div>
  </h:body>
</html>

Replacing

<ui:insert name="content">Content</ui:insert>

with

<h:form id="fileUpoad" prependId="false" enctype="multipart/form-data"> 
<p:fileUpload fileUploadListener="#{fileUploadBean.uploadPhoto}" mode="advanced" update="messages" auto="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:messages id="messages" autoUpdate="true" closable="true" />
</h:form>

will work but doing this:

<ui:composition template="/resources/templates/dashboard_template.xhtml"
            xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"    
            xmlns:p="http://primefaces.org/ui"
            xmlns:ui="http://xmlns.jcp.org/jsf/facelets">  

  <ui:define name="title">
      Dashboard
  </ui:define>
  <ui:define name="content">
    <h:form id="fileUpoad" prependId="false"     enctype="multipart/form-data"> 

        <p:fileUpload fileUploadListener="#{fileUploadBean.uploadPhoto}" mode="advanced"
                      update="messages" auto="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

        <p:messages id="messages" autoUpdate="true" closable="true" />

    </h:form>   
  </ui:define>
</ui:composition>

Will result in error as mentioned. Any ideas?

When do you get this error? Just loading the page? Doing an upload? — Kukeltje, Nov 07 '16 at 20:22
Do you see a difference in loading js files (in the browser developer tool) between both cases? — Kukeltje, Nov 07 '16 at 20:49
@Kukeltje I see indeed a slight difference. Forgot to mention that I use pretty-faces. Could this cause the problem? Everything else works fine but this. — Danny Fonk, Nov 09 '16 at 13:03

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

Okay. Thanks to @Kukeltje I found out that prettyfaces caused the problem. Unfortunately I can't close this as duplicate (Primefaces FileUpload with PrettyFaces and JSF 2.2.3).

Answer:

<?xml version="1.0" encoding="UTF-8"?>
<Context allowCasualMultipartParsing="true">
</Context>

is necessary in context.xml

From: https://stackoverflow.com/a/20617462/2295729

edited May 23 '17 at 12:07

Community

1
1

answered Nov 09 '16 at 13:09

Danny Fonk

58
1
8

JSF FileUpload doesnt work when using ui:define

1 Answers1