CODEWITHSUNDEEP
jsf-2
Ioan
Ioan

Reputation: 5187

JSF2 uploading photo with primefaces problems

I am using the following snippet for uploading photo, using primefaces : 

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
    <h:outputText value="PrimeFaces Single Upload"  />
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{uploadPhotoHandler.handleFileUpload}" mode="advanced"
            update="messages" label="Choose a file" sizeLimit="5242880" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
            invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
            invalidFileMessage="You are allowed to upload only images !" />
        <p:growl id="messages" showDetail="true" sticky="true" />

This composition I am adding into the main page, which is index.xhtml using the following command : <ui:include src="upload_img_form.xhtml" />.

The main page looks like : 

<?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 lang="en" 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:p="http://primefaces.org/ui">
<h:head>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.xdr-transport.js"></script>
    <script type="text/javascript" src="js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="themes/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
    <link type="text/css" rel="stylesheet" href="themes/jquery-ui-1.10.0.custom/css/sunny/jquery-ui-1.10.0.custom.css" />
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type=" text/css" rel="stylesheet" href="css/styles.css" />
</h:head>
<h:body>
    <div id="container" class="container ">
        <ui:include src="upload_img_form.xhtml" />
    </div>
</h:body>
</html>

I have the following problems :

The problem is 100% related to the head section because if I remove that, it works. Though, it doesn't work for others functionality in the same page, so I have to keep the js files and styles.

Thank you for your response.

Upvotes: 0

Views: 362

Answers (1)

BalusC
BalusC

Reputation: 1108642

Get rid of the manually included jQuery. PrimeFaces already auto-includes own copies. If they are of a different version, it would only conflict, resulting in JS-related trouble in all colors. You would have noticed it if you have checked the JS console in browser's developer toolset.

Upvotes: 1

Related Questions