Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
English
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.

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

...