Update Image Thumbnail in File Manager

[Roy Sunga]

Hi,

When I upload an image in the File Manager, it looks like this.

Can you recommend a way to fix this? Perhaps, display a default thumbnail image like the PDF file uploaded in the same folder?

Thanks!

[Indhumathy Loganathan]

Hi Denzel, 

 

Greetings from Syncfusion support. 

 

We have validated your reported query in File Manager component. In File Manager, the image file previews are available using GetImage operation. Kindly ensure whether you performed GetImage file operation in your sample. Also to show general thumbnails for image files you can use our ShowThumbnail property to customize your own icons for thumbnails. Refer to the below code snippet. 

 

[Index.razor] 

<SfFileManager ID="file-manager" TValue="FileManagerDirectoryContent" ShowThumbnail="false" View="ViewType.LargeIcons"> 

    <FileManagerAjaxSettings Url="/api/SampleData/FileOperations" 

                                UploadUrl="/api/SampleData/Upload" 

                                DownloadUrl="/api/SampleData/Download" 

                                GetImageUrl="/api/SampleData/GetImage"> 

    </FileManagerAjaxSettings> 

</SfFileManager> 

<style> 

    .e-filemanager .e-large-icons .e-fe-image { 

       background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmL 

TgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zy 

IgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94P 

SIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVz 

ZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5 

zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDoj 

QzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3 

Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw 

6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2 

Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0 

MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbD 

ojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZF 

O30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3Qy 

OXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxs 

OiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyR 

jQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zd 

DM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2Zp 

bGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y 

2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9 

LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjx 

wYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMS41LDAuNWgtMTdjLTEuMSwwLTIsMC45LTIsMnYyN2MwLDEuMSwwLjksMiw 

yLDJoMjNjMS4xLDAsMi0wLjksMi0ydi0yMUwyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjcuNSwzMmg 

tMjNDMy4xLDMyLDIsMzAuOSwyLDI5LjV2LTI3QzIsMS4xLDMuMSwwLDQuNSwwaDE3LjJMMzAsOC4zdjIxLjJDMzAs 

MzAuOSwyOC45LDMyLDI3LjUsMzJ6IE00LjUsMUMzLjcsMSwzLDEuNywzLDIuNXYyN0MzLDMwLjMsMy43LDMxLDQ 

uNSwzMWgyM2MwLjgsMCwxLjUtMC43LDEuNS0xLjVWOC43TDIxLjMsMUg0LjV6Ii8+PC9nPjxnPjxwYXRoIGNsYXNz 

PSJzdDIiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDEiI 

GQ9Ik0yOS41LDloLTdDMjEuNyw5LDIxLDguMywyMSw3LjV2LTdjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLj 

EsMC40LDAsMC41LDAuMWw4LDhDMzAsOC4zLDMwLDguNSwzMCw4LjdDMjkuOSw4LjksMjkuNyw5LDI5LjUsOXog 

TTIyLDEuN3Y1LjhDMjIsNy44LDIyLjIsOCwyMi41LDhoNS44TDIyLDEuN3oiLz48L2c+PC9nPjxnPjxwb2x5Z29uIGNsYXNz 

PSJzdDYiIHBvaW50cz0iNSwyNCAxMC42LDE3LjIgMTQuOCwyMS44IDIxLjQsMTMgMjcsMjQgIi8+PC9nPjwvc3ZnPg=="); 

    } 

</style> 

 

[Controller.cs] 

[Route("GetImage")] 

public IActionResult GetImage(FileManagerDirectoryContent args) 

{ 

    //Invoking GetImage operation with the required paramaters 

    // path - Current path of the image file; Id - Image file id; 

    return this.operation.GetImage(args.Path, args.Id, false, null, null); 

} 

 

You can find the sample demonstrating the solution from below link. 

 

https://www.syncfusion.com/downloads/support/forum/166886/ze/FileManagerPhysicalProvider-424217450 

 

Output screenshot: 

 

 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L