Primefaces 6: disable button Upload with fileUpload component with mode simple

Question

I'm using Primefaces 6 and I create a fileUpload component as below:

                <p:fileUpload id="myId" 
                          styleClass="MY-STYLE" 
                          value="#{bean.objUploadedFile}" 
                          mode="simple" 
                          skinSimple="true" 
                          multiple="false"
                          update="@form"
                          label="Choose"
            >
            </p:fileUpload>

I must use mode=simple so ajax is false. I add then a button to manage the upload:

                <p:commandButton id="btnId" 
                             value="Upload" 
                             disabled="#{myBean.btnDisabled}"
                             process="@form"
                             update="@form"
                             ajax="false"
                             actionListener="#{myBean.manageUpload}" 
            />

This button is loaded with disable=true to startup. Can I set disable=false for this button when user click on Choose button in the fileUpload component? I tried with javascript but it does not work. Is it possible?

U need to use ajax I guess to update the button while file is uploading. — Ahmed Raaj

ronchi82 ronchi82 · Accepted Answer · 2018-01-25T12:15:58

Unfortunately it's not possible, I tried and discovered that fileUpload is a "non-ClientBehaviorHolder parent" (aka. no p:ajax ).

The second option would be use one of the java script events of the generated input type="file" ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file ), but prime faces do not expose then...

Wich means the jsf - prime faces way, at least in simple mode, is to let the button always enable and validate file selection on form submit.

Although if you really want/need enable the button on file selection, you can use jquery to attach a event listener to the input type="file" that will enable the button, but this option is kinda of hack, so I don't recomend it because prime-faces and jsf tend to be unforgiving when you mess around with their expected component behaviors.

Primefaces 6: disable button Upload with fileUpload component with mode simple

1 Answers