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 "mongodb.pdf" in the file upload element will bring up the pop up dialog that will display the pdf file's content.
In any form that contains File Upload field, add a Custom HTML and put in the following code.
<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>