Display file icon next to a document/download on the front-end of the wesbite

Jessica Waters asked on November 11, 2016 10:39

Hi There,

We are currently using Kentico v8.1.17 to manage our website. Is there a way that I can display a file icon and file size next to a document on the front end of the website once it has been uploaded to the page?

Many thanks Jessica

Recent Answers

Roman Hutnyk answered on November 11, 2016 14:15

Jessica, it would be nice if you provide a bit more information: is uploaded document saved as attachment or in media library? what web part do you use to show those files on a page?

To answer your question - yes, it is possible.

0 votesVote for this answer Mark as a Correct answer

Adam Gitin answered on November 13, 2016 13:40

Hi Jessica,

If you are using Media Library to store your image and you use the "Media gallery" webpart its default transformation show the file size data.

Here is the transformation code:

<%@ Register Src="~/CMSModules/MediaLibrary/Controls/LiveControls/MediaFilePreview.ascx" TagName="MediaFilePreview" TagPrefix="cc1" %>
<div class="mediaItem">
<table>
    <tr>
        <td class="mediaLibraryPhoto"><a href="<%# HTMLHelper.HTMLEncode(MediaLibraryFunctions.GetMediaFileDetailUrl(Eval("FileID"))) %>" title="<%# ResHelper.GetString(Convert.ToString(Eval("FileDescription"))) %>">
        <cc1:MediaFilePreview ID="filePreview" runat="server" maxsidesize="117" width="117" height="117" /></a>
        </td>
    </tr>
    <tr>
        <td class="mediaLibraryDescription">
<a href="<%# HTMLHelper.HTMLEncode(MediaLibraryFunctions.GetMediaFileDetailUrl(Eval("FileID"))) %>" title="<%# ResHelper.GetString(Convert.ToString(Eval("FileDescription"))) %>">
            <%# HTMLEncode(LimitLength(GetNotEmpty("FileTitle;FileName"), 18, "...")) %>
            </a><br/>
            Size:&nbsp;<%# DataHelper.GetSizeString(ValidationHelper.GetLong(Eval("FileSize"), 0)) %><br/>
            Uploaded:&nbsp;<%# ((DateTime)Eval("FileCreatedWhen")).ToString("M/d/yyyy") %>

        </td>
    </tr>
</table>
<div class="mediaItemBottom"></div>
</div>

If you are not using Media Library it is still possible.

Have a great day

1 votesVote for this answer Mark as a Correct answer