How to add overlays to folder/file icons

6 Replies
2 Participants

Created by
BR Bruno

Platform
Blazor

Platform
Blazor

Control
File Manager

Created On
Jun 9, 2026 02:55 PM UTC

Last Activity On
Jul 10, 2026 03:28 PM UTC

Want to subscribe?
SIGN IN

When I set the permission in the FileManagerDirectoryContent to read-only FileManager automatically places a padlock on the folder icon.

I extended the FileManagerDirectoryContent class by an IsShared field. When IsShared is true I would like to show a shared overlay icon above the folder/file icon.

I also plan to show more overlays to reflect certain custom file/folder states.

How can I achieve that?

Best regards, Bruno

6 Replies

PS Praveen Sellappan Syncfusion Team June 10, 2026 02:03 PM UTC

Hi Bruno,

Greetings from Syncfusion Support.

Based on the details you shared, we understand that you want to display custom overlay icons above the folder/file icons in the File Manager.

We prepared a sample that demonstrates how to display custom overlay icons above the default folder icon. In our customization, we extended the FileManagerDirectoryContent class with additional properties such as IsShared, IsProtected, and IsArchived in the server like yours.

On the server side, during the Read operation, we checked the folder names and updated these custom properties accordingly:

Documents → IsShared = true
Music → IsArchived = true
Pictures → IsProtected = true

On the client side, in the large icons view, we used the LargeIconsTemplate property and conditionally rendered overlay icons based on the custom property values. With this approach, you can display different overlay icons for folders/files depending on their state.

Like the Large Icons view, we also customized the Navigation Pane by using the NavigationPaneTemplate property of the File Manager. In the sample, overlay icons are rendered in the navigation pane as well, based on the corresponding custom property values.

We have attached the updated sample for your reference. Kindly review it and check whether it meets your requirement.

Code Snippet:

[Server: Models: FileManagerDirectoryContent.cs]

public class FileManagerDirectoryContent

{

.......

public bool IsShared { get; set; }

public bool IsArchived { get; set; }

public bool IsProtected { get; set; }

}

[Controllers: FileManagerAccessController.cs]

[Route("FileOperations")]

public object FileOperations([FromBody] FileManagerDirectoryContent args)

{

.......

switch (args.Action)

{

case "read":

var response = this.operation.GetFiles(args.Path, args.ShowHiddenItems);

if (response.Files != null)

{

var filesList = response.Files.ToList();

for (int i = 0; i < filesList.Count; i++)

{

var item = filesList[i];

string folderName = item.Name != null ? item.Name.TrimEnd('/') : string.Empty;

if (!item.IsFile && (args.Path == "" || args.Path == "/"))

{

if (folderName.Equals("Documents", StringComparison.OrdinalIgnoreCase))

item.IsShared = true;

else if (folderName.Equals("Music", StringComparison.OrdinalIgnoreCase))

item.IsArchived = true;

else if (folderName.Equals("Pictures", StringComparison.OrdinalIgnoreCase))

item.IsProtected = true;

}

response.Files = filesList;

}

return this.operation.ToCamelCase(response);

}

[Cilent: Home.razor]

.....

@if (item is not null)

{

.......

@if (item.IsShared)

{

</div>

}

@if (item.IsArchived)

{

</div>

}

@if (item.IsProtected)

{

</div>

}

</div>

...

}

</LargeIconsTemplate>

@if (context is FileManagerDirectoryContentExtended item)

{

@if (item.IsShared)

{

</div>

}

@if (item.IsArchived)

{

</div>

}

@if (item.IsProtected)

{

</div>

}

</div>

}

</div>

</NavigationPaneTemplate>

</SfFileManager>

<style>

.file-icon-container {

position: relative;

width: 190px;

height: 150px;

margin-bottom: 10px;

}

.overlay-icon {

position: absolute;

bottom: 5px;

right: 5px;

width: 32px;

height: 32px;

background-color: white;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 18px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

border: 2px solid #ccc;

}

.shared-icon {

background-color: #4CAF50;

color: white;

border-color: #45a049;

}

.archived-icon {

background-color: #2196F3;

color: white;

border-color: #0b7dda;

}

.protected-icon {

background-color: #ff9800;

color: white;

border-color: #e68900;

}

.overlay-icon span {

font-size: 18px;

}

.shared-icon span {

color: white;

}

.archived-icon span {

color: white;

}

.protected-icon span {

color: white;

}

.e-fm-template-sample .e-nav-pane-node .e-icons {

display:inline-block;

}

.nav-overlay-icon {

position: absolute;

bottom: 16px;

width: 15px;

height: 15px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

border: 1px solid #ccc;

padding: 0;

left: 38px;

}

</style>

If the sample does not fully meet your requirement or if you need further customization in the File Manager, please feel free to share additional details. We will be happy to assist you further.

Regards,

Praveen Sellappan

Attachment: Sample_57a694c2.zip

BR Bruno June 16, 2026 03:56 PM UTC

Hi Praveen

I have implemented the Templates and it works.

But I have a problem with FileManagerContextMenuSettings and the folder icons.
The folder icons show the file menu in the large icon view instead of the folder menu. In the navigation view it's ok.

My LargeIconTemplate is as follows:

                <LargeIconsTemplate Context="item">
                    @if (item is not null)
                    {
                        <div class="so-fm-icon-card">
                            <div class="so-fm-icon-container">
                                <div class="so-fm-icon-wrapper">
                                    @if (!item.IsFile)
                                    {
                                        <IconFolder Size="48" Color="#FDDD35" ColorDark="#FAC800" />
                                    }
                                    else
                                    {
                                        switch (item.Type?.ToLowerInvariant())
                                        {
                                            case ".sap":
                                                <IconModel Size="48" />
                                                break;
                                            case ".sbf":
                                                <IconBlockFolder Size="48" />
                                                break;
                                            case ".sse":
                                                <IconSelection Size="48" />
                                                break;
                                            default:
                                                <IconFile Size="48" />
                                                break;
                                        }
                                    }
                                    @if (item.IsShared)
                                    {
                                        <div class="so-fm-overlay-icon so-fm-shared-icon" title="Shared">
                                            <span class="e-icons e-link"></span>
                                        </div>
                                    }
                                </div>
                            </div>
                            <div class="so-fm-file-name" title="@item.Name">@item.Name</div>
                        </div>
                    }
                </LargeIconsTemplate>

I implemented special icon components for showing custom svgs.

Any clues why the folder icons show the wrong menu in the large icon view?
I cannot check it with your sample code since it needs an Api.

Regards, Bruno

PS Praveen Sellappan Syncfusion Team June 17, 2026 05:30 PM UTC

Hi Bruno,

Based on the information provided, we have validated and classified the reported scenarios regarding the “Incorrect Context Menu on Folder Right-Click in Large Icon View with Custom Templates in File Manager" as a bug on our end. The fix for this issue will be included in the upcoming weekly release scheduled for July 7,2026.

You can track the status of the fix through the following feedback link.

Incorrect Context Menu on Folder Right-Click in Large Icon View with Custom Templates in File Manager in Blazor | Feedback Portal

Disclaimer: The provided tentative release timeline is subject to change in the future based on development priorities and testing outcomes.

Regards,

Praveen Sellappan

BR Bruno June 18, 2026 04:00 PM UTC

Hi Praveen

As you can see in my code snipped above I implemented my own file icons in LargeIconsTemplate.

Can you show me how can I change the file icons in the detail view. Is there also special template?

I would also like to set overlay icons for shared and read only files.

Best regards,

Bruno

PS Praveen Sellappan Syncfusion Team June 19, 2026 05:31 PM UTC

Hi Bruno,

Thank you for your patience.

We understand that you would like to customize the folder and file icons displayed in the Details View of the File Manager. However, the File Manager currently does not provide a built-in option to customize the Icon column in the Details View. However, we have considered your requirement as a feature from our end, but we do not have any immediate plans to implement this feature. At the planning stage for every release cycle, we review all open features and implement them based on feature rank, customer request count, and volume wish-list.

The status of implementation can be tracked through the feedback portal link below:

Provide Support for Customizing the File Manager Details View Icon Column in Blazor | Feedback Portal

If you have any further questions or need additional assistance, please feel free to contact us.

Regards,

Praveen Sellappan

PS Praveen Sellappan Syncfusion Team July 10, 2026 03:28 PM UTC

Hi Bruno,

Thanks for your patience.

We are pleased to inform you that our weekly patch release has been successfully rolled out, and the issue "Incorrect Context Menu on Folder Right-Click in Large Icon View with Custom Templates in File Manager" has been resolved in this release.

To access this fix, we suggest updating the package to version 34.1.30. We have also included the sample in the latest version for your reference.

Sample: Attached as a zip file.

Feedback: Incorrect Context Menu on Folder Right-Click in Large Icon View with Custom Templates in File Manager in Blazor | Feedback Portal

Release Notes: Essential Studio for Blazor Release Notes - v34.1.30

Root cause: In LargeIcons view, files and folders were identified by checking for the .e-list-icon element. When a custom LargeIconsTemplate was used, this element was not present. As a result, all items were incorrectly treated as files, causing folders to appear as files in context menus and related file operations.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Praveen Sellappan

Attachment: BlazorFileManagerSample_311fce95.zip

Need More Help?

Get personalized assistance from our support team.

Contact Support

6 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
BR Bruno
Platform
Blazor
Control
File Manager
Created On
Jun 9, 2026 02:55 PM UTC
Last Activity On
Jul 10, 2026 03:28 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support