how to load a thumbnail or image to represent a pdf file RRS feed

  • Question

  • User767034699 posted

    Hi guys,

    i have a thirdparty control(telerik kendo grid) to load data. so on one of the columns i have image tag to load images but as for pdfs i cant preview the image in the grid as it shows no image. so i would like to maybe have a special image for pdfs like an icon of pdf or image thats shows pdf.

    All images and pdfs are from the database. so i load them on one column for preview. 

    see one of the columns below

      columns.Bound(b => b.Picture64).Title("FicaPicture").ClientTemplate("<img src='data:image/png;base64,\\#=Picture64\\#' class='imgLink' />");  

    kind regards


    Monday, September 28, 2020 5:46 PM

All replies

  • User-474980206 posted

    you will need to get a pdf to image utility and create the thumbnails images to display. 

    Monday, September 28, 2020 7:29 PM
  • User767034699 posted

    Hi Bruce,

    thanks for the feedback,

    not sure if i understand you correctly,

    okay i have a class where i read the files from the database and then convert them back to image see below

     public class UsersFicaUploadResultModel
            public int UsersFicaUploadResultsID { get; set; }
            public Nullable<int> userid { get; set; }
            public string cellnumber { get; set; }
            public string filename { get; set; }
            public byte[] fileImageVarBinary { get; set; }
            public string Picture64
                    return fileImageVarBinary != null ? Convert.ToBase64String(fileImageVarBinary) : null;
            public Nullable<System.DateTime> lastupdated { get; set; }
            public string updateby { get; set; }

    one of the files can be pdf file on the list. are you saying i can use image utility method to convert pdf file to an image?

    kind regards


    Monday, September 28, 2020 7:48 PM
  • User-474980206 posted

    No. You need get a pdf to image conversion library. 

    Tuesday, September 29, 2020 2:40 PM
  • User-189459990 posted

    Maybe you can try "GridView" to show image.

    Here is a demo that show images via “GridView”.  First, we need to create a column with “ImageField”.

        <asp:GridView runat="server" ID="testGridView" AutoGenerateColumns="false">
                <asp:BoundField DataField="Id" HeaderText="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:ImageField DataImageUrlField="Image" HeaderText="Image"></asp:ImageField>

    Then access the image path in the database directly and bind the data from database like:

        string constr = @"connection string";
        da = new SqlDataAdapter("select * from TestTable", con);
        ds = new DataSet();
        testGridView.DataSource = ds;
    Wednesday, September 30, 2020 1:40 AM
  • User767034699 posted

    Hi guys,

    thanks for the replies,

    managed to solve the problem, so let me post it to help another person who might come across the same challenge. 

    The idea was to load thumbnail pdf icon if the file is pdf else load image. Since im using a thirdparty tool Telerik kendo grid. See below  code

        function CheckforPDF(e) {
            // Get the grid element
            var gridRows = this.tbody.find("tr");
            gridRows.each(function (e) {
                var images = $(this).find("img.imgLink");
                var filecheck = images.attr("alt");
                var fileExt = filecheck.split('.').pop();
                if (fileExt == 'pdf') {
                    images.attr('Src', 'Images/pdficon.png');
                //custom logic

    i have wired an events databound to the grid on load of the grid datasource in order to check pdf file and then load appropriate icon for it. I believe this can also be done on normal Gridview.

    kind regards


    Tuesday, October 20, 2020 7:46 PM
  • User-189459990 posted

    Glad that you have got a solution.

    Are there any other questions about this case? If not, maybe you can mark the helpful replies, so that this can help others find solutions faster.

    Wednesday, October 21, 2020 2:01 AM