How to hide a button until an action is completed?

Question

i currently have a file upload system in place, and currently i have a button to take the user to the next page, but this is visible even if the user has not uploaded anything, the danger is here if the user presses this before uploading anything it will throw an error and look bad, so what i am trying to do is hide this button until file upload is successfully achieved, any ideas how ?

<p:fileUpload widgetVar="upload" fileUploadListener="#{fileUploadController.handleFileUpload}"
                                  mode="advanced" 
                                  multiple="false" 
                                  update="messages"
                                  label="Select File"
                                  sizeLimit="100000000" 
                                  allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf|html)$/"
                                  auto="true"/> 
                    <!-- selected auto="true" this has been selected to prevent user error as was discovered 
                    when testing, some users pressed the upload button and wondered why nothing worked instead of
                    select file, now this stops this -->


                    <p:growl id="messages" showDetail="true"/>

                    Please press the button below once you have uploaded the file, to continue


                    <p:commandButton action="#{navigationBean.naviagtion}"   value="Next"  ajax="False"/> 

the command button of action next is the one i wish to disable untill file upload is complete

EDIT :

<p:commandButton action="#{navigationBean.naviagtion}"   value="Next"  ajax="False" disabled="#{!fileUploadController.UploadComplete}"/> 

Is my command button, it is pointing to the fileUploadContoller, this is where the file upload happens etc,

the issue is when i run the app i get a live button always on page load

i have added a boolean onto my fileUploadController :

    public void handleFileUpload(FileUploadEvent event) {
        //System.out.println("DesintationPDF : " + destinationPDF);
        System.out.println("called handle file");
        System.out.println("Destination is : " + configProp.getProperty("destination"));

        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded."); //Displays to user on the webpage
        FacesContext.getCurrentInstance().addMessage(null, msg);


        try {
            copyFile(event.getFile().getFileName(), event.getFile().getInputstream());
        } catch (IOException e) {
//handle the exception
            e.printStackTrace();
        }

    }

    public boolean isUploadComplete() {
        return uploadComplete;
    }

    public void setUploadComplete(boolean uploadComplete) {
        this.uploadComplete = uploadComplete;
    }

but still get the error

EDIT 2 :

     <p:commandButton action="#{navigationBean.naviagtion}"   value="Next" disabled="#{!fileUploadController.uploadComplete}"/> 

the console

INFO: Upload complete value before copy file false
INFO: upload complete value is : true

so it is changing the value to true

but is not changing the button to live

Answer 1

make the next button as invisible. maintain a flag = false in the beginning, after successfully uploading the file make the flag as true. or at the end of the file upload make next button visible to true;

Answer 2

ON upload complete event set display=block.

HTML

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" id="submitbutton" value="submit" style="display:none" />
</form>
<div id="result"></div>

Javascript:

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                   document.getElementById("submitbutton").style.display='block'; 
                } 
            }
            );
    });

Live demo:http://jsfiddle.net/E42XA/205/

Answer 3

To disable your button until the upload finished, just bind the disabled attribute to a property in a bean. In my opinion disabling seems much more intuitive than suddenly rendering it. Also the user will know that there's something going on in the background.

 <p:commandButton action="#{navigationBean.naviagtion}" value="Next" disabled="#{bean.disable}" ajax="False"/> 

Since you use PrimeFaces, this solution is the easiest. Just replace bean with the name of your bean.

Edit:

public class YourNavigationBean {

    private boolean uploadComplete; // <--- that's the property

    // ... your bean content, like constructors and stuff..
    // ...

    //a setter and a getter is needed, to here they are
    public boolean isUploadComplete() {
       return uploadComplete;
    }
    public void setUploadComplete(boolean uploadComplete) {
       this.uploadComplete = uploadComplete;
    }
}