4 Replies Latest reply on Mar 18, 2011 1:35 PM by Nick Belaevski

    FileUpload inside model panel - Upload Button not displayed

    Fabian Riako Newbie

      Hi All,

       

      I am using a rich:fileUpload control inside a model panel to upload some images. I have a button name "Upload Photo" which displays model panel with file upload control. Here is the model panel

       

       

      <rich:modalPanel  id="mp" height="410" width="800" zindex="2000">
              <f:facet name="header">
                  <h:outputText value="File upload" />
              </f:facet>
              <f:facet name="controls"><a href="#" onclick="#{rich:component('mp')}.hide()">Close</a></f:facet>
               <h:outputText value="Maximum number of files can be selected at a time is restricted to 25" />
              <h:form>
                  <h:panelGrid columns="2" columnClasses="top,top">
                      <rich:fileUpload fileUploadListener="#{recEditManager.listener}"
                                               id="upload"
                                               listHeight="300"
                                               listWidth="550"
                                               allowFlash="true"
                                               maxFilesQuantity="#{ChainProperties.getProperty('UploadsAvailable.maxSize')}"
                                               autoclear="true"
                                               noDuplicate="true"
                                               sizeErrorLabel="File size restricted to 2MB"
                                               acceptedTypes="jpg, gif, png, bmp">
                          <f:facet name="label"><h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}"/></f:facet>
                          <a:support event="onuploadcomplete" reRender="uploadInfo, imagePanel" />                           
                      </rich:fileUpload>
                      <s:div style="height: 340px;overflow: auto;">
                          <h:panelGroup id="uploadInfo">
                              <rich:panel bodyClass="info" style="height:700px">
                                  <f:facet name="header">
                                      <h:outputText value="Uploaded Files Info" />
                                  </f:facet>
                                  <h:outputText value="No files currently uploaded" rendered="#{recEditManager.uploadItems.size==0}" />
                                  <rich:dataGrid columns="1" value="#{recEditManager.uploadItems}" var="file" rowKeyVar="row">                                 
                                      <h:panelGrid columns="2"> <h:outputText value="File Name: #{file.fileName}" /> </h:panelGrid>                                 
                                  </rich:dataGrid>
                              </rich:panel>
                          </h:panelGroup> 
                      </s:div>                     
                      </h:panelGrid>
              </h:form>
          </rich:modalPanel> 

       

      //Upload Photo Button

       

      <a:commandButton id="uploadModal"
                                       value="Upload Photo">
                           <a:support event="onclick"/>                  
                           <rich:componentControl for="mp" operation="show" event="onclick" disableDefault="true"/>                 
                      </a:commandButton>

       

      The above code works fine if I upload 25 files at once but if I select 5 files first then close model panel. Then invoke model panel again by clicking "Upload Photo" this time eventhough i can select multiple files only one is displayed in file upload control and "Upload" button is not displayed.

      This is happening only in IE. Firefox and Chrome works fine, my richfaces version is 3.3.3.

       

      Please help if anybody knows the issue.

       

       

      <rich:modalPanel  id="deletePicturePanel" height="200" width="350" zindex="2000" resizeable="false">
                            <f:facet name="header">Delete Confirmation</f:facet>
                            <f:facet name="controls"><a href="#" onclick="#{rich:component('deletePicturePanel')}.hide()">Close</a></f:facet>
                          <h:form id="deleteForm">
                              <a:outputPanel ajaxRendered="true">
                                  <h:messages id="globalError" styleClass="message"  errorStyle="color: red" infoStyle="color: green" layout="list" globalOnly="true"/>
                                  <h:messages id="error" style="display:none"/>
                              <h:outputText value="All selected pictures will be deleted! Do you want to proceed?"
                                            rendered="#{receivingEditManager.deleteFlag}" />
                               
                              <h:outputText value="No images selected!"
                                            rendered="#{not receivingEditManager.deleteFlag}" />
                              </a:outputPanel>                           
                              <br/><br/><rich:spacer width="230"/>
                                     <a:commandButton id="saveDeletePic"
                                             rendered="#{receivingEditManager.deleteFlag}"
                                          value="Proceed"
                                          action="#{receivingEditManager.deletePictures()}"
                                          oncomplete="#{rich:element('deleteForm:error')}==null ? #{rich:component('deletePicturePanel')}.hide() : #{rich:component('deletePicturePanel')}.show()"
                                          reRender="imageGrid, deletePicturePanel"/>
                                 
                          </h:form>
                         </rich:modalPanel>