1

I want to use p:fileUpload to upload image in my application.

Here i create a demo program for that which work correctly. but when i put it within the JSF template it's look is change and doesn't invoke the FileUploadEvent.

Here is my jsf page: (working) // ------------

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

            <p:growl id="messages" showDetail="true"/>  
</h:form>

//-------- Backing bean

@ManagedBean
public class FileUploadController
{
public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, msg);
        try {
            String path = FacesContext.getCurrentInstance().getExternalContext().getRealPath("/");
            SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmss");
            String name = fmt.format(new Date())
                    + event.getFile().getFileName().substring(
                    event.getFile().getFileName().lastIndexOf('.'));
            File file = new File(path + "/" + name);            
            this.setFileName(name);
            this.setState(Boolean.TRUE);
            InputStream is = event.getFile().getInputstream();
            OutputStream out = new FileOutputStream(file);
            byte buf[] = new byte[1024];
            int len;
            while ((len = is.read(buf)) > 0) {                
                out.write(buf, 0, len);
            }
            is.close();
            out.close();

        } catch (Exception e) {
            System.out.println("Exception in file io");
        }

    }
}

//------- Now i put it within the template it doesn't work as following

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
<ui:composition template="/layout/homeLayout.xhtml">
    <ui:define name="content">
        <h:form enctype="multipart/form-data">  
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
                          mode="advanced"   
                          update="messages"  
                          sizeLimit="100000"   
                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                          auto="true"/>  

            <p:growl id="messages" showDetail="true"/>  
            <br/>                                    
        </h:form> 
    </ui:define>
</ui:composition>
</h:body>
</html>

//------- Here is my homeLayout.xhtml (Template)

<?xml version='1.0' encoding='UTF-8' ?> 
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />

        <!--        JQuery Data Table Dependencies START-->
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_page.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_table_jui.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui-1.7.3.custom.min.js"></script>

        <script type="text/javascript">                
            $(document).ready(function () {                    
                $("#dataTbl1").dataTable({                        
                    "sPaginationType": "full_numbers",
                    "bJQueryUI": true
                });                    
            });
        </script>
        <!--        JQuery Data Table Dependencies END-->

        <title>Facelets Template</title>
    </h:head>

    <h:body>

        <div id="top">
            <ui:insert name="top">
                <h:graphicImage url="#{facesContext.externalContext.requestContextPath}/resources/images/loginUser.png"/>
                <h:outputText value="Jewellery Shop" style="font-size: x-large;font-family: Monotype-Corsiva"/>                
                <ui:include src="../pages/common/userMenu.xhtml"/>                
            </ui:insert>
        </div>

        <div id="content" class="center_content">
            <ui:insert name="content">Content</ui:insert>
        </div>

        <div id="bottom">
            <ui:insert name="bottom">Bottom</ui:insert>
        </div>

    </h:body>

</html>

I try a lot to find whats the problem but i can't find the soluti

Kelvin
  • 43
  • 8

2 Answers2

1

PrimeFaces already ships with jQuery and jQuery UI bundled. It might have conflicted with your jQuery libraries which you added manually and hence cause all PrimeFaces components which depend on assistance of jQuery to fail. Also the value of jQuery datatables is questionable as the PrimeFaces <p:dataTable> practically supports almost everything also supported by jQuery DataTables plugin. Explore the <p:dataTable> showcase to learn about all of its capabilities.

There's not really need to manually use jQuery and jQuery UI when using PrimeFaces. It already ships with a big set of rich UI components based on top of jQuery UI. You should instead look what component PrimeFaces offers for the particular functional requirement and use it.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks BalusC... I removed all manually added JQuery and uses primefaces components thats works pretty good. – Kelvin May 06 '12 at 23:48
0

I faced the same problem when I wanted to use it with JSF template. I have found the solution. The problem appears when you use the regular expression

allowTypes="/(\.|\/)(gif|jpe?g|png)$/"

When you parameterise the allowType with <ui:param name="allowType" value="/(\.|\/)(rptdesign)$/" /> then it replaces the "\." with "." (dot without slash).

I have sent the allowType value with double slash like below and now it is working fine. 

    <ui:include src="path_to_dialogUploadFiles.xhtml" >
    <ui:param name="name" value="UploadDesign" />
    <ui:param name="header" value="Header value" />
    <ui:param name="fileUploaderListenerBean" value="#{listenerBean}" />                    
    <ui:param name="commandButtonValue" value="Upload" />
    <ui:param name="isMultiple" value="true" />
    <ui:param name="allowType" value="/(\\.|\\/)(gif|jpe?g|png)$/" /> 
    </ui:include>`
Muhammad Nuruddin
  • 1
  • 2