p:fileUpload doesn't work inside p:dialog

Question

I'm trying to upload a file using PrimeFaces p:fileUpload inside p:dialog but it doesn't work

<h:form id="form3"> 
       <p:commandLink value="upload" oncomplete="PF('Dialog').show()" />            
       <p:dialog  widgetVar="submitDialog" modal="true"  >
              <h:form id="form" enctype="multipart/form-data" > 
                     <h:panelGrid id="submitPanelGrid" columns="2"  >
                         <p:fileUpload  id="upload" value="#{bean.file}"  mode="simple" sizeLimit="100000"  />
                         <p:commandButton id="btn3" action="#{bean.submit()}"  icon="ui-icon-circle-check" ajax="false"  /> 
                     </h:panelGrid>
                 </p:panel>
              </h:form>
       </p:dialog>
</h:form>   

I'm getting this exception just after I click on the link:

org.apache.tomcat.util.http.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream,
content type header is application/x-www-form-urlencoded;

But outside <p:dialog>, it works just fine.

Answer 1

First a form inside of another is not allowed in html, you have to separate the dialog from the main form, and for the exception you are getting you have to add enctype="multipart/form-data" to your dialog form :

   <h:form id="form3"> 
         <p:commandLink value="upload" oncomplete="PF('Dialog').show()" />      
   </h:form>      

   <p:dialog  widgetVar="submitDialog" modal="true"  >
          <h:form id="form" enctype="multipart/form-data" > 
                 <h:panelGrid id="submitPanelGrid" columns="2"  >
                     <p:fileUpload  id="upload" value="#{bean.file}"  mode="simple" sizeLimit="100000"  />
                     <p:commandButton id="btn3" action="#{bean.submit()}"  icon="ui-icon-circle-check" ajax="false"  /> 
                 </h:panelGrid>
             </p:panel>
          </h:form>
   </p:dialog>