PDF File Viewer inside Form

Learn how to display the contents of a PDF file directly in a pop-up from the file upload field in a form. This method allows you to review documents immediately without downloading them.

To implement this functionality, follow the steps outlined below:

1. Add Custom HTML
   In any form containing a  File Upload field, insert the following  Custom HTML code:
   

   <div id="pdfPreview" style="display:none;">
       <object
         data="pdfFilePath" type="application/pdf" width="100%" height="100%">
         <iframe src="pdfFilePath" width="100%" height="100%" style="border: none;">
           <p>Your browser does not support PDFs. <a href="pdfFilePath">Download the PDF</a>.</p>
         </iframe>
       </object>
   </div>

2. Add the following JavaScript code to handle the interaction:
   

   $(function(){
       $("ul.form-fileupload-value > li > a").click(function(e){
           url = $(this).attr("href");
           if(url.endsWith(".pdf.")){
               e.preventDefault();
               showPopupActionDialog(url);
           }
       });
   });
    
   function showPopupActionDialog(url){
       var wWidth = $(window).width();
       var dWidth = wWidth * 0.9;
       var wHeight = $(window).height();
       var dHeight = wHeight * 0.9;
        
       var previewObj = $( "#pdfPreview" ).clone().html(function(index,html){
           return html.replace(/pdfFilePath/g, url);
       });
        
       var inputDialog = $( previewObj ).dialog({
         autoOpen: true,
         height: dHeight,
         width: dWidth,
         modal: true,
         buttons: [
           {
             text: "Close",
             click: function() {
               inputDialog.dialog( "close" );
             }
           }
         ]
       });
   }

These steps let users preview PDF files directly within your web application without downloading. This enhances user experience and efficiency by eliminating unnecessary steps in accessing PDF content.