Primefaces isn't working in mode advance jsf 2.0

I'm trying to upload file using primefaces 4.0 in jsf 2.0. After I config pom.xml and web.xml and it can work with mode="simple" and I can choose a file well. My problem is upload multiple file in mode="advance", it display a upload panel in UI but javascript not working. I don't add any js lib in my jsf page to escape conflict with primefaces js.
Do you have any recommend related?

In the case I can't use primefaces with mode="advance" then what should i use to upload multiple file in jsf 2.0?

Please help. - XHTML:

 <?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:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{helloBean.upload}"
            mode="advanced" dragDropSupport="false" multiple="true"
            sizeLimit="100000" fileLimit="3"
            allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
    </h:form>
</h:body>
</html>

ManageBean

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String destination = "E:\\uploadFile\\";

    private UploadedFile file;

    public void upload(FileUploadEvent event) {
        System.out.println(event.getFile().getFileName() + " is uploaded.");
    }

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }

}

web.xml

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

<!-- ############################################# -->
<!-- # File upload                               # -->
<!-- ############################################# -->
<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.xml:

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>4.0</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.1.7</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.1.7</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.1</version>
    </dependency>

    <dependency>
        <groupId>com.sun.el</groupId>
        <artifactId>el-ri</artifactId>
        <version>1.0</version>
    </dependency>

</dependencies>

<build>
    <finalName>JavaServerFaces</finalName>

    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.1</version>
            <configuration>
                <source>1.6</source>
                <target>1.6</target>
            </configuration>
        </plugin>
    </plugins>
</build>

library: i add commons-fileupload-1.2.jar, commons-fileupload-1.2-sources.jar, commons-io-2.4.jar, commons-io-2.4-sources.jar, primefaces-4.0.jar, primefaces-4.0-sources.jar.
Error show from firebug:
```
TypeError: $(...).addclass is not a function
$(this).addclass('ui-state-focus');
```
The error happen below file.
http:/.../JavaServerFaces/javax.faces.resource/fileupload/fileupload.js.xhtml?ln=primefaces&v=4.0

I already upload with mode="simple" successful but not success with mode="advance". What's i missing?

Solution

I suggest to submit form to iframe. Because of p:fileUpload mode="simple" must work with submit form. This proposed can solve reload page on browser.

The example code below. XHTML

<h:form enctype="multipart/form-data" target="my_iframe">
    <p:fileUpload value="#{fileUploadView.file}" mode="simple" />
    <p:commandButton value="Submit" 
                     ajax="false" 
                     actionListener="#{fileUploadView.upload}" />        
</h:form>
<iframe name="my_iframe" style="display:none;"></iframe>

ManagedBean

@ManagedBean
public class FileUploadView {

    private UploadedFile file;
    public void upload() {
        if(file != null) {
            System.out.println(file.getFileName());
            // TODO Auto-generated method stub           
        }
    }

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }
}

This an example of multiple file upload by using mode="advance"

XHTML

<h:form enctype="multipart/form-data">          
    <p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" 
                  mode="advanced" 
                  dragDropSupport="false" 
                  multiple="true" 
                  update="@this"
                  process="@this" 
                  sizeLimit="100000" 
                  fileLimit="3" 
                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" /> 
</h:form>

ManagedBean

@ManagedBean
public class FileUploadView {

    private UploadedFile file;

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }

    public void handleFileUpload(FileUploadEvent event) {
        System.out.println(event.getFile().getFileName() + " is uploaded.");
        // TODO Auto-generated method stub 
    }
}