Unable to open image file in ui-dialog - Issue in IE 11

Question

I am able to work with .pdf file in both the IE and Chrome browser. But in IE following error appears for the image type file.

Below is my function for the dialog.

<script type="text/javascript">    
        function Downloadfile(x) {
            var jquery = $;
            var empCode = $("#EmpCode").val();           
            var fileName = $(x).closest("tr").find('td:eq(0)').text();
            var actualfileName = $(x).closest("tr").find('td:eq(1)').text();

            jquery("#dialog").dialog({
                modal: true,
                title: actualfileName,
                width: 950,
                height: 550,
                open: function () {
                    jquery('.ui-dialog').css('z-index', 2000); jquery('.ui-widget-overlay').css('z-index', 1500);
                    jquery('.ui-dialog-titlebar').css({ "background": "white", "border": "none", "text-align": "left", "font-size": "normal" });
                    jquery('span').css({ "text-align": "left", "font-size": "normal" });
                    var object = "<object data=\"http://mysitename.com/filepath/{FileName}\" type=\"application/pdf\" width=\"900px\" height=\"500px\">";
                    object += "If you are unable to view file, you can download from <a href = \"http://mysitename.com/filepath/{FileName}\">here</a>";
                    object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
                    object += "</object>";
                    object = object.replace(/{FileName}/g, "/" + fileName);
                    jquery("#dialog").html(object);
                }
            });
        }
</script>

Answer 1

I fixed the issue by checking file type with the extension of file to be loaded in the dialog and added an extra condition if the file is of type image as shown below.

I added img tag for image and src for the path of image file to be loaded.

<script type="text/javascript">
    function Downloadfile(x) {
        var jquery = $;
        var empCode = $("#EmpCode").val();
        var fileName = $(x).closest("tr").find('td:eq(0)').text();
        var actualfileName = $(x).closest("tr").find('td:eq(1)').text();

        var validExtensions = ["jpg", "jpeg", "gif", "png"];
        var file = fileName.split('.').pop();
        jquery("#dialog").dialog({
            modal: true,
            title: actualfileName,
            width: 950,
            height: 550,
            open: function () {
                jquery('.ui-dialog').css('z-index', 2000); jquery('.ui-widget-overlay').css('z-index', 1500);
                jquery('.ui-dialog-titlebar').css({ "background": "white", "border": "none", "text-align": "left", "font-size": "normal" });
                jquery('span').css({ "text-align": "left", "font-size": "normal" });
                var object = "<object data=\"http://mysitename.com/filepath/{FileName}\" type=\"application/pdf\" width=\"900px\" height=\"500px\">";
                object += "If you are unable to view file, you can download from <a href = \"http://mysitename.com/filepath/{FileName}\">here</a>";
                object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
                object += "</object>";
                object = object.replace(/{FileName}/g, "/" + fileName);
                
                //For image files
                var image = "<img src=\"http://mysitename.com/filepath/{FileName}\" width=\"900px\" height=\"500px\">"; 
                image = image.replace(/{FileName}/g, "/" + fileName);

                if (validExtensions.indexOf(file) != -1) {
                    jquery("#dialog").html(image);
                } else {
                    jquery("#dialog").html(object);
                }
            }
        });
    }
</script>