Customize the "This Folder is empty" view

[Bruno]

Hi

When a folder is empty is shows a big folder icon and the text "This folder is empty".

I have a special folder that gets the files from an Api. When the Api is not accessible (offline) I'd like to show a offline icon and the text "Offline". It should also not be possible to drop files.

How can I show full customized content in the icon and the details view? Can you provide a sample?

Thanks in advance for your help.

Regards, Bruno

[Praveen Sellappan]

Hi Bruno,

Greetings from Syncfusion Support.

We understand that you would like to customize the empty folder view in the FileManager to display a specific "Offline" icon and text when your API is inaccessible.

Customizing the Empty State:

We are happy to provide a workaround to achieve this. You can implement this by handling the OnSuccess event of the FileManager to toggle a CSS class based on the response status and path. We have attached a sample demonstrating how to:

1. Dynamically apply an fm-offline-state class when the folder is empty and the API is in an offline state.
2. Use CSS to override the default icon and text with your custom "Offline" view.

Code Snippet:

<div>

    <SfFileManager TValue="FileManagerDirectoryContent" CssClass="@EmptyStateClass" @ref="fileManager">

        ...

        <FileManagerEvents TValue="FileManagerDirectoryContent"

                           OnSuccess="Success" >

        </FileManagerEvents>

    </SfFileManager>

</div>

@code {

    public string path = "/tvy/";

    SfFileManager<FileManagerDirectoryContent> fileManager;

    public string EmptyStateClass;

    private void Success(SuccessEventArgs<FileManagerDirectoryContent> args)

    {

        var currentpath = fileManager.Path;

        if (args.Action == "read" &&

             currentpath == path  &&

            args.Result.Files.Count == 0 &&

            args.Result.CWD.HasChild == false)

        {

            EmptyStateClass = "fm-offline-state";

        }

        else

        {

            EmptyStateClass = string.Empty;

        }

    }

}

<style>

   

   

    .fm-offline-state .e-empty-icon{

        background-image: none;

    }

   

    .fm-offline-state .e-empty-icon::before {

            content: "\e878";

            font-family: "e-icons";

            font-size: 40px;

            color: #6b7280;

            display: block;

            text-align: center;

            margin-top: 48px;

        }

    .fm-offline-state .e-empty-content {

        position: relative;

        color: transparent !important;

        font-size: 0 !important;

    }

        .fm-offline-state .e-empty-content::before {

            content: "Offline";

            position: absolute;

            inset: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #374151;

            font-size: 18px;

            font-weight: 600;

        }

</style>

Regarding Drag-and-Drop Restrictions

To ensure we provide the most effective solution for your requirements, could you please clarify the following?

• Would you like to prevent external drag-and-drop uploads into that folder?
• Or are you aiming to restrict the drag-and-drop movement of existing files or folders within the component?

Knowing this will help us suggest the correct event handlers to manage or disable these interactions.

Please review the attached sample and let us know your requirements regarding the drag-and-drop functionality so we can assist you further. We appreciate your patience and look forward to your feedback.

Regards,

Praveen Sellappan

Attachment: FileSample_e815e3bb.zip

[Bruno]

Hi Praveen

Thank you for your code snipped! I works like a charm.

I would also disable all OS drag-drop uploads and internal moves into offline folders since I can do nothing with the file while connection to the API is off.

Can you provide me short sample code?

Regards, 

Bruno 

[Praveen Sellappan]

Hi Bruno,

Thank you for sharing the details.

Regarding external drag-and-drop upload:

In File Manager, we have an option to prevent drag-and-drop upload by using the DropArea property. However, disabling drag-and-drop upload using the DropArea property applies to the entire File Manager, not to a specific location. Based on the current component structure, this is the way to prevent drag-and-drop upload. We have documentation that clearly explains how to restrict drag-and-drop upload, and we have attached it for your reference.

Documentation: Prevent upload in Blazor File Manager Component | Syncfusion

Regarding preventing the drag-and-drop operation for a specific folder:

In File Manager, it is possible to prevent the drag-and-drop operation for a particular folder by using the OnFileDragStop event. Based on the requirement, we have customized the sample to achieve this. In the sample, at the OnSuccess event, we store the file Name and FilterPath, and then in the OnFileDragStop event, we check the drop target name and FilterPath. If the drop target is the specific folder that needs to be restricted, we set args.Cancel = true, which prevents the drag-and-drop operation.

Code Snippet:

<SfFileManager TValue="FileManagerDirectoryContent" CssClass="@EmptyStateClass" @ref="fileManager" AllowDragAndDrop="true">

    ......

    <FileManagerEvents TValue="FileManagerDirectoryContent"

                       OnSuccess="Success" OnFileDragStop="FileDragStop">

    </FileManagerEvents>

</SfFileManager>

@code {

    .......

    private void Success(SuccessEventArgs<FileManagerDirectoryContent> args)

    {

        var currentpath = fileManager.Path;

        if (args.Action == "read" &&

             currentpath == path &&

            args.Result.Files.Count == 0 &&

            args.Result.CWD.HasChild == false)

        {

            EmptyStateClass = "fm-offline-state";

            IsSpecailFolder = args.Result.CWD.Name;

            filterpath = args.Result.CWD.FilterPath;

        }

        else

        {

            EmptyStateClass = string.Empty;

            IsSpecailFolder = "";

            filterpath = "";

        }

    }

    public void FileDragStop(FileDragEventArgs<FileManagerDirectoryContent> args)

    {

        if (EmptyStateClass == "fm-offline-state" && IsSpecailFolder == args.DropTargetDetail.Name && filterpath == args.DropTargetDetail.FilterPath)

        {

            args.Cancel = true;

        }

    }  

}

We have attached the sample for your reference. Please review it and confirm whether it addresses your requirement.

Please let us know if there is anything else we can help with.

 

Regards,

Praveen Sellappan

Attachment: FileDND_97c91bfc.zip

[Bruno]

Hi Praveen

I used a Interop solution for preventing drag/drop. It shows  a not allowed cursor if drop is not possible. Thats less confusing for the user. I call the two functions in the Success event 

window.fileManagerUtils = {
    // prevent external drag-and-drop  
    preventExternalDrop: function (elementId) {
        const el = document.getElementById(elementId);
        if (!el) return;
        el._preventDrop = function (e) {
            if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
                e.preventDefault();
                e.stopPropagation();
                e.dataTransfer.dropEffect = 'none';
            }
        };
        el.addEventListener('dragover', el._preventDrop, true);
        el.addEventListener('drop', el._preventDrop, true);
    },

    allowExternalDrop: function(elementId) {
        const el = document.getElementById(elementId);
        if (!el || !el._preventDrop) return;
        el.removeEventListener('dragover', el._preventDrop, true);
        el.removeEventListener('drop', el._preventDrop, true);
        delete el._preventDrop;
    }
};

I also supressed the text "Drag files here to upload" by the following css-class:

.e-filemanager.so-fm-offline .e-empty-inner-content {
    font-size: 0 !important;
    color: transparent !important;
}

Do you think that these two measures are ok?

Regards, Bruno



[Praveen Sellappan]

Hi Bruno,

Thank you for your detailed update.

As mentioned earlier, the Blazor File Manager component currently supports restricting external drag-and-drop at the component level. However, there is no built-in API available to enforce this restriction for specific folders individually.

We understand that you have implemented a solution using JavaScript interop within the success event. Based on your explanation, this approach appears to address your requirement effectively.

Since this solution is currently meeting your needs, we recommend thoroughly validating it across all your relevant use cases before proceeding to production.

Additionally, we have implemented the workaround you shared in our sample application. During our testing, drag-and-drop uploads were successfully prevented for the targeted folder, as expected.

We appreciate you sharing your approach with us. Please feel free to reach out if you need further assistance or encounter any challenges.

Regards,
Praveen Sellappan