File Manager - Kendo jQuery - Undefined filename

0 Answers 23 Views
FileManager
Developer
Top achievements
Rank 1
Developer asked on 26 Feb 2024, 10:33 AM | edited on 27 Feb 2024, 08:36 AM

HI,

I am using Kendo jQuery.

FileManager is not showing the folder names , instead it is showing as "undefined".

 

Version :

        <!-- Kendo UI -->
        <script src="~/lib/kendo-ui-2023.3.1010/js/kendo.all.min.js"></script>
        <script src="~/js/kendo-ui-license.js" type="text/javascript"></script>

 

 

 

Visual Studio C# backend response  

 

c# Code :
public virtual JsonResult OnPostFileManagerRead(string target)

{
    try
    {
........
........
                var files = directoryBrowser.GetFiles(path, Filter);

                var directories = directoryBrowser.GetDirectories(path);

                var result = files.Concat(directories).Select(f => new
                {
                    Name = f.Name,
                    Size = f.Size,
                    Path = VirtualizePathString(f.Path),
                    Extension = f.Extension,
                    IsDirectory = f.IsDirectory,
                    HasDirectories = f.HasDirectories,
                    Created = f.Created,
                    CreatedUtc = f.CreatedUtc,
                    Modified = f.Modified,
                    ModifiedUtc = f.ModifiedUtc
                });



               return new JsonResult(result.ToArray());
            }
            catch (DirectoryNotFoundException)
            {
                throw new Exception("File Not Found");
            }
        }

        throw new Exception("Forbidden");
    }
    catch(Exception ex)
    {
        return new JsonResult(ex);
    }
}


Query :

1. What might be the issue ?

2. How can i resolve this issue ?

 

Neli
Telerik team
commented on 29 Feb 2024, 04:19 AM

Hi,

Could you please provide more details about the FileManager configuration? Also please check the response returned by the read endpoint in the Network tab of the browser Developer Tools and send more information about that.

Looking forward to yuor reply.

Regards,

Neli

Developer
Top achievements
Rank 1
commented on 05 Mar 2024, 06:48 AM

Configuration :

<div id="filemanager1"></div>
<script>
    function isObjEmpty(obj) {
        return Object.keys(obj).length === 0;
    }
    $("#filemanager1").kendoFileManager({
        dataSource: {
            schema: kendo.data.schemas.filemanager,
            transport: {
                 
                read: {
                    url: FMbaseURL + "/Index?handler=FileManagerRead",
                    method: "POST"
                },
                create: {
                    url: FMbaseURL + "/Index?handler=FileManagerCreate",
                    method: "POST"
                },
                update: {
                    url: FMbaseURL + "/Index?handler=FileManagerUpdate",
                    method: "POST"
                },
                destroy: {
                    url: FMbaseURL + "/Index?handler=FileManagerDestroy",
                    method: "POST"
                }
            }
        },
        uploadUrl: FMbaseURL + "/Index?handler=FileManagerUpload",
        toolbar: {
            items: [
                { name: "upload" },
                { name: "sortDirection" },
                { name: "sortField" },
                { name: "changeView" },
                { name: "spacer" },
                { name: "details" },
                { name: "search", }
            ]
        },
        contextMenu: {
            items: [
                { name: "rename" },
                { name: "delete" },
                { name: "getlink", text: "Get Link", command: "GetLinkCommand" },
                { name: "download", text: "Download", command: "DownloadCommand" }
            ]
        },
        draggable: true,
        resizable: true,
        execute: onExecute,
        navigate: onNavigate,
        open: onOpen,
        select: onSelect,
        command: onCommand
    });

    function onOpen(e) {
        if (e.entry.extension == ".png"
            || e.entry.extension == ".jpg"
            || e.entry.extension == ".bmp"
            || e.entry.extension == ".jpeg") {
            $("#imagePreview").attr("src", "@Model.ImagesDrivePath" + e.entry.path);
            $("#imagePreview").show();
            $("#mediaplayer1").hide();
            $("#window").data("kendoWindow").center().open();
        }
        if (e.entry.extension == ".mp4"
            || e.entry.extension == ".mov") {
            var videourl = "@Model.ImagesDrivePath" + e.entry.path;
            $("#imagePreview").hide();
            $("#mediaplayer1").show();
            $("#mediaplayer1").kendoMediaPlayer({
                autoPlay: false,
                media: {
                    title: "Video",
                    source: videourl
                }
            });
            $("#window").data("kendoWindow").center().open();
        }


    }
    function onDataBound(e) {
        console.log("event: DataBound");
    }

    function onDrop(e) {
        console.log("event: Drop");
    }

    function onExecute(e) {
        console.log("event: Execute");
    }

    function onNavigate(e) {
        console.log("event: Navigate");
    }

    function onSelect(e) {
        console.log("event: Select");
    }

    function onCommand(e) {
        console.log("event: Command; context: " + e.status + ", " + e.action + ", " + e.data.item.path);
    }

    $(document).ready(function () {
        var filemanager = $("#filemanager1").getKendoFileManager();

        filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
        filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();


        filemanager.upload.bind("error", function (e) {
            //  debugger;
            var myJson = JSON.parse(e.XMLHttpRequest.response);
            var status = myJson.status;
            //  alert(status);
            // alert(e.XMLHttpRequest.statusText);
        });

    })


</script>
Developer
Top achievements
Rank 1
commented on 05 Mar 2024, 06:50 AM

The read endpoint attached.

 

Developer
Top achievements
Rank 1
commented on 05 Mar 2024, 06:50 AM | edited

Console Log :

Martin
Telerik team
commented on 07 Mar 2024, 01:01 PM

Hello, 

Thank you for the provided information. Could you please try returning the fields from the server lower-cased - "name", 'size', 'path', etc?

Let me know how that goes.

Developer
Top achievements
Rank 1
commented on 08 Mar 2024, 09:38 AM

HI. Thank you for your comment.

Issue fixed.

No answers yet. Maybe you can help?

Tags
FileManager
Asked by
Developer
Top achievements
Rank 1
Share this question
or