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>