Popup Image Viewer inside Form

Learn how to display PDF file contents directly in a popup from the image upload field in a form. This method allows you to review documents immediately without needing to download them.

Follow the steps below to correctly implement the popup functionality for viewing PDFs in your form:

1. Add a Custom HTML element to your form where the Image Upload field is present.

2. Add the following HTML and JavaScript code to enable the popup viewer:
   

   <div id="imgPreview" style="display:none;">
       <div style="text-align: center;">
           <img src="imgFilePath" style="max-height: 80%; max-width: 80%;"/>
       </div>
   </div>
   
   <script type="text/javascript">
   // Extend jQuery Dialog widget.
   $.widget("ui.dialog", $.ui.dialog, {
       // Customize open method to register the overlay click.
       open: function() {
           var me = this;
           $(document).on('click', ".ui-widget-overlay", function() {
               me.close();
           });
   
           // Invoke the original open method.
           this._super();
       },
       close: function() {
           // Remove click handler for the overlay.
           $(document).off("click", ".ui-widget-overlay");
   
           // Invoke the original close method.
           this._super();
       }
   });
   
   $(function() {
       $("ul.form-fileupload-value > li > a").click(function(e) {
           var url = $(this).attr("href").toLowerCase();
           if (url.endsWith(".jpg") || url.endsWith(".png") || url.endsWith(".jpeg")) {
               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 = $("#imgPreview").clone().html(function(index, html) {
           return html.replace(/imgFilePath/g, url);
       });
   
       $(previewObj).dialog({
           autoOpen: true,
           height: dHeight,
           width: dWidth,
           modal: true
       });
   }
   </script>

   Enhanced Features:

   • Extending the jQuery Dialog Widget: This enhancement adds functionality to the jQuery Dialog widget, enabling modal dialogues that close upon clicking the overlay and activate when PDF files are clicked.
   • Automatic Closure on Overlay Click: This feature allows an easy and intuitive exit from the dialogue, thereby enhancing the form's usability.
   • Activation on PDF Click: This functionality is specifically tailored to trigger when a PDF file link is clicked. It displays the PDF in a modal popup, providing a focused and streamlined viewing experience.
   Ensure jQuery UI is loaded for dialog functionality.

   This implementation provides a direct and efficient way to view PDF content within forms, improving user interaction by making document review immediate and convenient without downloads.