How to Show Widget while p:fileUpload is in progress

Question

I'm using this fileUpload to upload documents from an Excel sheet.

                    <h:form id="leForm2" enctype="multipart/form-data">
                        <p:fileUpload
                             mode="advanced"  showButtons="FALSE"
                             label="{messages['upload.xls']}"                                                       
                            fileUploadListener="#{bean.handleFileUpload}"                                                           
                            id="uploadCargaMasiva" update="messages3, :tabs:formTab2:documentoList" auto="true"                                                                                     
                            allowTypes="/(\.|\/)(xls|xlsx)$/"/>
                        <p:growl id="messages3" escape="true" sticky="false"
                            lifetime="800" showDetail="false" />                            
                    </h:form>

This works as expected. My issue is that I need to show ap:Dialog while the upload is in progress, and I can't find the way of doing this.

This is my dialog:

<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false">
    <p:graphicImage value="/images/ajaxloadingbar.gif" />
</p:dialog> 

I don't know how to call it or where :(. Any suggestions?

Answer 1

                <h:form id="leForm2" enctype="multipart/form-data">
                    <p:fileUpload
                         mode="advanced"  showButtons="FALSE"
                         label="{messages['upload.xls']}"                                                       
                        fileUploadListener="#{bean.handleFileUpload}"                                                           
                        id="uploadCargaMasiva" update="messages3, :tabs:formTab2:documentoList" auto="true"                                                                                                            onstart="statusDialog.show()"
                        allowTypes="/(\.|\/)(xls|xlsx)$/"/>
                    <p:growl id="messages3" escape="true" sticky="false"
                        lifetime="800" showDetail="false" />                            
                </h:form>

In the bean.java I added this line at the end of handleFileUpload:

     RequestContext.getCurrentInstance().execute("widgetHide()");

widgetHide is a JS function:

<script type="text/javascript">  
    function widgetHide()
    {                                   
        statusDialog.hide();    
    }

</script>

As was suggested, onstart and oncomplete shoud do the trick, but for some reason oncomplete wasn't working . So I had to do this walkaround to make it work.