Popup Image Viewer inside Form

Introduction

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

How does it work?

Prerequisite

Ensure your form includes a File Upload field.

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

1. Add a Custom HTML element to your form where the File 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 a file link is 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 File Click: This functionality is specifically tailored to trigger when a file link is clicked. It displays the 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 images content within forms, improving user interaction by making document review immediate and convenient without downloads.

Expected outcome

In this example, clicking any image in the file upload element brings up the pop-up dialog box that displays the image content.

Video Tutorial

The video below provides a visual representation of the steps mentioned.

Download Sample App