In this article, we are going to show you how to quickly show PDF file's content itself without first downloading the file.
Sample screenshots:-

Clicking on any image in the file/image upload element will bring up the pop up dialog that will display the pdf file's content.

In any form that contains Image Upload field, add a Custom HTML and put in the following code.

<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 click
    open: function() {
       var me = this;
       $(document).on('click',".ui-widget-overlay",function(e){
          //call dialog close function
          me.close();
       });
 
       // Invoke parent open method
       this._super();
    },
    close: function() {
        // Remove click handler for the current .ui-widget-overlay
        $(document).off("click",".ui-widget-overlay");
        // Invoke parent close method
        this._super(); 
    }
});

$(function(){
    $("ul.form-fileupload-value > li > a").click(function(e){
        url = $(this).attr("href");
        urlCheck = url.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);
    });
     
    var inputDialog = $( previewObj ).dialog({
      autoOpen: true,
      height: dHeight,
      width: dWidth,
      modal: true,
      /*buttons: [
        {
          text: "Close",
          click: function() {
            inputDialog.dialog( "close" );
          }
        }
      ]*/
    });
}
</script>
  • No labels