Show / Hide another element based on primefaces p:fileUpload

Question

I tried to show a label which value is file name of the file uploaded by user...

Here is my simple form

<h:form>            
        <p:outputLabel value="#{indexBacking.fileName}" rendered="#{indexBacking.showLabel}" id="fileNameLabel"/>                                      
        <p:fileUpload id="uploadImage" mode="advanced"
                      dragDropSupport="false" required="true"
                      sizeLimit="5120000"
                      requiredMessage="Harap upload KTP anda"
                      allowTypes="/(\.|\/)(gif|jpeg|png|pdf)$/"                                                  
                      fileUploadListener="#{indexBacking.handleUpload}"
                      update="fileNameLabel"                               
                      auto="true"/>
</h:form>

Here is my backing

public void handleUpload(FileUploadEvent event) {
    showLabel = true;
    System.out.println("file uploaded");
    UploadedFile file = event.getFile();
    fileName = file.getFileName();
}

But every time I upload the file, the label did not show...Can anyone explain to me why? Thanks

is showLabel set to false before called by handeUpload? if so, as Microbob said, you can't update unrendered component. try to wrap the outputLabel with panel or panelGrid, then update the panel or panelGrid instead of the outputLabel itself — Blablabla, Dec 11 '18 at 22:23

Microbob · Accepted Answer · 2018-12-14T10:46:00.670

1

Your update="fileNameLabel" should address the h:form since it is the wrapper of your label which has to be rendered.

Edit 14.12.2018

try something like this:

<h:form> 
   <div jsf:id="uploadImageWrapper">           
        <p:outputLabel value="#{indexBacking.fileName}" rendered="#{indexBacking.showLabel}" id="fileNameLabel" for="uploadImage" />                                      
        <p:fileUpload id="uploadImage" mode="advanced"
                      dragDropSupport="false" required="true"
                      sizeLimit="5120000"
                      requiredMessage="Harap upload KTP anda"
                      allowTypes="/(\.|\/)(gif|jpeg|png|pdf)$/"                                                  
                      fileUploadListener="#{indexBacking.handleUpload}"
                      update="uploadImageWrapper"                               
                      auto="true"/>
   </div>
</h:form>

Notice that i also added the for-attribute in the label, it's not necessary but cleaner.

edited Dec 14 '18 at 10:46

answered Dec 11 '18 at 07:14

Microbob

66
4

but i don't want to update the form, because in my current project if i update form, there will be another request to database...Btw this can only accomplish by update the form? – berry Dec 11 '18 at 07:20
1

you could wrap your label and fileUpload in a new element. Like Blablabla said, this could be a panel or a simple div with a jsf:id. – Microbob Dec 14 '18 at 10:39
1

the 'jsf:id' being explained in https://stackoverflow.com/questions/951593/what-jsf-component-can-render-a-div-tag – Kukeltje Dec 14 '18 at 11:08

Show / Hide another element based on primefaces p:fileUpload

1 Answers1