PDF File Viewer inside Form

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