Time for action – using the FileDownload component

Let us see how we can use the FileDownload component:

1. Create the FileDownload component:

   <p:dialog modal="true" widgetVar="statusDialog" header="File Download Status" draggable="false" closable="false" resizable="false">  
     <p:graphicImage value="/resources/images/ajax-loader.gif" />  
   </p:dialog> 
   
   <h:form>
     <p:commandButton id="downloadBtn" value="Download" ajax="false" onclick="PrimeFaces.monitorDownload(onDownloadStart, onDownloadStop)" icon="ui-icon-arrowthick-1-s">  
     <p:fileDownload value="#{userController.userPic}" />  
   </p:commandButton>
   
   </h:form> 

2. Implement the JavaScript callback methods to show the dialog box when the download starts and close the dialog when the download completes:

   <script type="text/javascript">  
   	function onDownloadStart...