0

I'm having a lot of problems with fileupload and dialog from primefaces.

I have a button that calls a dialog when it is clicked. Inside this dialog I have a fileUpload. I want this dialog to close when I choose some file and update an image on the form. Here is the code: 

<h:form id="formCadastroSistema">
  <div id="divCadastroComponenteConstrutivo">
    <h:outputText value="Cadastro de Componente Construtivo" style="font-size: 20px; color: black;"/>
    <p:layout style="height:240px; width: 100%; margin-top: 20px; padding-left: 40px;">
      <p:layoutUnit position="west" size="330" style="border: none;" resizable="false" >
        <p:graphicImage value="#{novoComponenteConstutivo.mostrarImagemDeByte()}" id="foto"/>
        <p:commandButton onclick="dialogUpLoad.show();" value="abrir"/>
      </p:layoutUnit>
      <p:layoutUnit position="center" style="font-size: 14px; border: none;">
        <h:panelGrid columns="2" cellspacing="5">
          <h:outputText value="Nome: "/>
          <p:inputText style="width: 295px;" value="#{novoComponenteConstutivo.novoComponenteConstrutivo.nome}"  />
          <h:outputText value="Categoria: "/>
          <p:selectOneMenu value="#{novoComponenteConstutivo.idCategoriaCamada}"  id="selectMenuCategoria" style="width: 305px;">
            <f:selectItems value="#{novoComponenteConstutivo.todasAsCategorias}" var="categoria" itemLabel="#{categoria.categoria}" itemValue="#{categoria.id}"/>
            <f:ajax event="valueChange" execute="selectMenuCategoria" listener="#{novoComponenteConstutivo.setarCategoriaDoNovoComponente()}" render="testi" />
          </p:selectOneMenu>
          <h:outputText value="Descrição: "/>
          <p:inputTextarea value="#{novoComponenteConstutivo.novoComponenteConstrutivo.descricao}" style="width: 295px; height: 50px;"/>
          <h:outputText value="Fabricante: "/>
          <p:selectOneMenu value="#{novoComponenteConstutivo.idFabricante}" id="selectMenuFabricante" style="width: 305px;">
            <f:selectItems value="#{novoComponenteConstutivo.todosOsFabricantes}" var="fabricante" itemLabel="#{fabricante.nome}" itemValue="#{fabricante.id}" />
            <f:ajax execute="selectMenuFabricante" event="valueChange" listener="#{novoComponenteConstutivo.setarFabricanteDoNovoComponente()}" render="testi2" />
          </p:selectOneMenu>

        </h:panelGrid>
        <h:outputText value="#{novoComponenteConstutivo.idCategoriaCamada}" id="testi"/>
        <h:outputText value="#{novoComponenteConstutivo.idFabricante}" id="testi2"/>
      </p:layoutUnit>
      <p:dialog style="height: 300px; width: 500px;" id="dialogUpLoad" widgetVar="dialogUpLoad" >
        <p:fileUpload fileUploadListener="#{novoComponenteConstutivo.uploadImagem}" update="foto" oncomplete="dialogUpLoad.hide();" multiple="false"  />
      </p:dialog>
    </p:layout>
    <p:separator/>
    <p:layout style="height: 150px; padding-left: 40px;" >
      <!--      -->
      <p:layoutUnit position="center" style="border: none;">
        <h:outputText value="Características Físicas" style="font-size: 18px;"/>
        <h:panelGrid columns="2" >
          <h:panelGrid columns="2" style="font-size: 14px; padding-top: 20px;" >
            <h:outputText value="Condutividade Térmica: "/>
            <p:inputText value="#{novoComponenteConstutivo.novoComponenteConstrutivo.condutividade}"  />
            <h:outputText value="Calor Específico: "/>
            <p:inputText value="#{novoComponenteConstutivo.novoComponenteConstrutivo.calorEspecifico}"/>
            <h:outputText value="Densidade Mínima: " />
            <p:inputText value="#{novoComponenteConstutivo.novoComponenteConstrutivo.densidadeMinima}"/>
          </h:panelGrid>
          <h:panelGrid columns="2"  style="font-size: 14px; padding-top: 20px; margin-left: 45px;" >
            <h:outputText value="Densidade Máxima: "/>
            <p:inputText  value="#{novoComponenteConstutivo.novoComponenteConstrutivo.densidadeMaxima}"/>
            <h:outputText value="Espessura: "/>
            <p:inputText value="#{novoComponenteConstutivo.novoComponenteConstrutivo.espessura}"/>
          </h:panelGrid></h:panelGrid>
        </p:layoutUnit>
      </p:layout>
      <h:commandLink value="confirm" style="position: absolute; right: 0px; font-size: 12px;" onclick="showDivConfirmacaoCadastroComponente();" >
        <f:ajax execute="@form" render=":formConfimacaoCadastroComponente" event="click"   />
      </h:commandLink>
    </div>
  </h:form>

It works on google chrome and FireFox, but IE the dialog doesn't close and the image doesn't update.

Diego Sabino
  • 11
  • 1
  • 6
  • Some Primefaces features doesn't work well on IE (except if you make some workaround), specially if you're using an old version. Check the Primefaces' forum to check your IE version compatibility, maybe someone had already asked some question about it. – Diogo Moreira Feb 04 '13 at 20:32
  • Primefaces is supposed to be IE 7 compatible till version 3.5. So you shouldn't have problems with it. – Aritz Feb 04 '13 at 21:08
  • The problem is that the update and oncomplete from fileupload is not working on IE . When i refresh the page, the image changes – Diego Sabino Feb 04 '13 at 22:38
  • @DiegoSabino , try to add `enctype="multipart/form-data"` to your `` – Daniel Feb 04 '13 at 22:50
  • Hello Daniel, i tried to do this, but i did not have success . There is something that doesn't let update and oncomplete works on fileupload. And it happens only on internet explorer – Diego Sabino Feb 04 '13 at 23:01
  • I am confused. Your comments on the question and the answer indicate that the problem is not solved, but yet the answer is accepted. Is your problem indeed solved? – BalusC Feb 05 '13 at 10:34
  • I am sorry, i'm new here, i just thought that indicates that i liked the comment – Diego Sabino Feb 05 '13 at 16:11

2 Answers2

1

It could be because the component ID and the widgetVar is the same.

 id="dialogUpLoad" widgetVar="dialogUpLoad"

Please refer to this SO question as well.

Community
  • 1
  • 1
user1351585
  • 94
  • 6
  • I changed the component ID and widgetVar, but the problem remains . The image is not updated, and the dialog is not closed – Diego Sabino Feb 04 '13 at 22:22
  • The problem is that the update and oncomplete from fileupload is not working on IE . When i refresh the page, the image changes . – Diego Sabino Feb 04 '13 at 22:37
0

Yes, like say user1351585, change the name of your id="dialogUpload" and add on web.xml the follow code:

<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>
Fred
  • 116
  • 6