PDF File Viewer inside Form

Introduction

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.

How does it work?

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:
   Ensure in File Upload properties, the Download as attachment field is unchecked.

   <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:
   

   $(document).on('page_loaded', function () {
       $("ul.form-fileupload-value > li > a:not(.remove)").click(function(e){
           url = $(this).attr("href");
           if(url.endsWith(".pdf.")){
               e.preventDefault();
               showPopupActionDialog(url);
           }
       });
     
     	//Change file_upload to relevant File Upload fieldId
     	var $dropzoneElm = $('#file_upload').closest('.dropzone');  
     	var dz = Dropzone.forElement($dropzoneElm[0]); 
     	dz.on("addedfile", function (file) { 
         	if (file.type === "application/pdf") { 
             	var $fileItem = $("ul.form-fileupload-value > li").last();
               var $nameSpan = $fileItem.find("span").first();
   
               // span click event to preview file
               $nameSpan
                   .css("cursor", "pointer")
                   .data("fileObj", file)
                   .addClass("pdf-preview-span")
                   .on("click", function (e) {
   					e.preventDefault();
                       var fileObj = $(this).data("fileObj");
   
                       if (!fileObj) return;
   
                       var blobUrl = URL.createObjectURL(fileObj);
                       showPopupActionDialog(blobUrl);
   
                       // Optional cleanup after 5seconds to preserve memory
                       setTimeout(function () {
                           URL.revokeObjectURL(blobUrl);
                       }, 5000);
                   });
           }
       });
   });
    
   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.

Expected outcome

In this example, while opening the form, clicking the mongodb.pdf file upload element opens a pop-up dialog that displays the PDF’s content.
The file can be previewed before and after form submission.

Sample App