Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Image Added

Clicking on "mongodb.pdf" in the file upload element will bring up the pop up dialog that will display the pdf file's content.

Image Added

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

Code Block
languagexml
linenumberstrue
collapsetrue
<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>

<script type="text/javascript">
$(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" );
          }
        }
      ]
    });
}
</script>

Sample screenshots:-

Image Removed

Clicking on "mongodb.pdf" in the file upload element will bring up the pop up dialog that will display the pdf file's contents.

...