Showing actual image as Thumbnail in the content pane of file manager.

[Anas]

Can we show actual image as a thumbnail in the content pane of the filemanager ?
I have read the documentation but didn't find any suitable reference. 

thats what i meant

[Ivaylo]

Hello Anas,

Thank you for the details provided.

Generally, the FileManager exposes the ability to change its default templates through its built-in API configurations FileManager. For your case in particular, through the PreviewPane.SingleFileTemplateId() and Views.List.TemplateId(). From there, you can incorporate a thumbnail as per your requirements by using the conventional Kendo UI templating mechanism.

For your convenience, I have additionally altered our readily available FileManager Templates Demo. So that the desired requirements are further achieved through the following Telerik REPL example:

• https://netcorerepl.telerik.com/cpFaduOA38DjXX7D40 

Here is the utilized configuration for the aforementioned example:

<script id="list-item-template" type="text/x-kendo-template">     
    <div class='k-listview-item' title='#:name##:extension#'>
     <div class='k-file-preview'>
          # if(isDirectory) { #
            <span class='k-icon k-svg-icon k-svg-i-folder k-file-icon k-icon-xxxl'>
            <svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
                <path d="m242.8 128-32-32H96v288h320V192H128v-32h288c17.7 0 32 14.3 32 32v192c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h128l64 64">
                </path>
            </svg>
           </span>
          # } else { #
            <img src="https://assets.weforum.org/article/image/responsive_big_webp_LpBxx04k7W4kOgcxypJSnOcGNxsi4EteP8epWdChRbo.webp" alt="Forest" style="width:150px">
          # } #
     </div> 
     <div class='k-file-name file-name'>#:name##:extension#</div> 
   </div>
</script>

<script id="preview-template" type="text/kendo-ui-template">
    <div class="#:styles.fileInfo#">
        <div class="#:styles.filePreview#">
            # if(selection[0].isDirectory) { #
           <span class='k-file-icon k-icon k-i-folder'></span>
          # } else { #
            <img src="https://assets.weforum.org/article/image/responsive_big_webp_LpBxx04k7W4kOgcxypJSnOcGNxsi4EteP8epWdChRbo.webp" alt="Forest" style="width:150px">
          # } #
        </div>
        // Omitted for brevity...
    </div>
</script>

@(Html.Kendo().FileManager()
      .Name("filemanager")
     // Omitted for brevity...
    .Views(v => v.List(l => l.TemplateId("list-item-template")))
    .PreviewPane(p => p.SingleFileTemplateId("preview-template"))
)

I hope this information was helpful and I look forward to your reply.

Regards,
Ivaylo
Progress Telerik

[Anas]

i am not using kendo (i didnt mention earlier and while submitting that ticket)
i am looking for blazor component telerik file manager control 
for reference my current code is below
 <SplitterPane Size="70%" Resizable="false">
     <TelerikFileManager Data="@FileManagerData"
     @bind-Path="@DirectoryPath"
     Height="400px"
     OnCreate="@OnCreateHandler"
     OnUpdate="@OnUpdateHandler"
     @bind-SelectedItems="@SelectedItems"
     OnModelInit="@OnModelInitHandler"
     OnDownload="@OnDownloadHandler"
     OnDelete="@OnDeleteHandler"
     >
         <FileManagerSettings>
             @*  <FileManagerUploadSettings SaveUrl="@GetUploadUrl(randomNumberString,FileTypeId)" OnSuccess="@OnUploadSuccess">
             </FileManagerUploadSettings> *@
         </FileManagerSettings>
         <FileManagerToolBar>
             <FileManagerToolBarNewFolderTool />
             @* @if (SCNameParam == "Land" && GetLevel() == "root-folder-path" && isAdmin == true) *@

             @*  <FileManagerToolBarUploadTool /> *@
             <FileManagerToolBarCustomTool>
                 <TelerikButtonGroup>
                     <ButtonGroupButton OnClick="@OpenUploadPopUp">Upload</ButtonGroupButton>
                 </TelerikButtonGroup>
                 @* <TelerikUpload SaveUrl="@GetUploadUrl(randomNumberString,FileTypeId)"
                                RemoveUrl="api/remove"
                                Multiple="true"
                                AutoUpload="true"
                                OnSuccess="@OnUploadSuccess" /> *@
             </FileManagerToolBarCustomTool>

             <FileManagerToolBarSortTool />
             <FileManagerToolBarSortDirectionTool />
             <FileManagerToolBarSpacer></FileManagerToolBarSpacer>
             @* <FileManagerToolBarViewDetailsTool></FileManagerToolBarViewDetailsTool> *@
             <FileManagerToolBarFileViewTool />
             <FileManagerToolBarCustomTool>
                 <TelerikButtonGroup>
                     <ButtonGroupButton OnClick="@HandleDetails">History</ButtonGroupButton>
                 </TelerikButtonGroup>
             </FileManagerToolBarCustomTool>
             <FileManagerToolBarSearchTool></FileManagerToolBarSearchTool>
         </FileManagerToolBar>
     </TelerikFileManager>
 </SplitterPane>