Render p:commandButton after uploading a file p:fileUpload

Question

I have a page with a p:fileUpload and a p:commandButton the first time the page is visited the button should be hidden and just after a file was uploaded the button should be rendered. My code looks like follows, any ideas on how to achieve this?

    <h:form enctype="multipart/form-data" >

        <p:fileUpload
            fileUploadListener="#{fileUploadController.handleFileUpload}"
            mode="advanced"
            multiple="true"
            sizeLimit="2000000000"
            allowTypes="/(\.|\/)(txt|csv)$/"
            required="true"
            label="Seleccionar"
            uploadLabel="Subir a servidor"
            cancelLabel="Cancelar">
        </p:fileUpload>

        <p:commandButton id="btnValidar" value=" Validar "
                         rendered="#{fileUploadController.btnRendered}"
                         style="margin-left: 430px;"/>

    </h:form>

Answer 1

Just use the update attribute the same way as on all other PrimeFaces ajax components.

<p:fileUpload update="@form" />

I of course assume that you've set btnRendered to true inside handleFileUpload method.

Please note that you can't set it to the ID of the button itself, simply because it's not present in the HTML DOM tree when the btnRendered defaults to false . It's namely JavaScript which does the updating job in the HTML DOM tree based on the retrieved Ajax response. If you want to update alone the button, not the form, then wrap it in another component which is always present in the HTML DOM tree:

<h:panelGroup id="btnValidar">
    <p:commandButton rendered="#{fileUploadController.btnRendered}" />
</h:panelGroup>

and update it as follows

<p:fileUpload update="btnValidar" />

See also:

• Communication in JSF 2.0 - Ajax rendering of content which is by itself conditionally rendered