Issue with duplicated folder after initial load.

1 Answer 63 Views

FileManager

Guillermo asked on 21 Jun 2024, 07:39 PM

Good afternoon,

I'm trying to integrate the FileManager component into an Oracle APEX application. I created a REST web service that generates the following JSON:

[
  {
    "name": "General",
    "isDirectory": true,
    "hasDirectories": true,
    "path": "folder",
    "extension": " ",
    "size": 90,
    "createdUtc": "/Date(1718637638946)/",
    "items": [
      {
        "name": "Test Folder 2",
        "isDirectory": true,
        "hasDirectories": false,
        "path": "folder/Test Folder 2",
        "extension": " ",
        "size": 8820,
        "createdUtc": "2024-06-18T20:56:13Z"
      },
      {
        "name": "TestFolder1",
        "isDirectory": true,
        "hasDirectories": false,
        "path": "folder/TestFolder1",
        "extension": " ",
        "size": 0,
        "createdUtc": "2024-06-07T19:52:48Z"
      },
      {
        "name": "File1.pdf",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File1.pdf",
        "extension": ".pdf",
        "size": 689541,
        "createdUtc": "2024-06-07T19:52:37Z"
      },
      {
        "name": "File2.pdf",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File2.pdf",
        "extension": ".pdf",
        "size": 312498,
        "createdUtc": "2024-06-07T19:52:37Z"
      },
      {
        "name": "File3.xlsx",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File3.xlsx",
        "extension": ".xlsx",
        "size": 107150,
        "createdUtc": "2024-06-07T19:52:38Z"
      },
      {
        "name": "File4.msg",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File4.msg",
        "extension": ".msg",
        "size": 376832,
        "createdUtc": "2024-06-07T19:52:37Z"
      }
    ]
  }
]

When the page loads, the component is rendered correctly (See the "General" folder in the following image):

However, when I click on the tree viewer (or double click on the folder in the right side) to view its contents, the result is a duplicated "General" folder. If I continue to select any of these folders, it keeps duplicating them:

In the network tab I see that when I selected the folder, two calls were made to the URL I defined in the dataSource.transport, this time adding some extra parameters (path/target and target):

This is the code to initialize the File Manager:

$("#filemanager").kendoFileManager({
    dataSource: {
        schema: kendo.data.schemas.filemanager,
        transport: {
            read: {
                url: "https://myservice/teams",
                method: "GET",
                dataType: "json"
            }
        }
    }
});

Could you please help me understand what am I missing or doing wrong?

As an additional question, I'd like to include in the JSON one more parameter (a download URL) that I'd like to use in the Context Menu, so when I right click on top of a file I select the option to download it. To accomplish this, do I need to modify completely the dataSource.schema? Or can I just simply add the URL to the JSON and then reference its value in the contextMenu.items array? Or (even better) does the File Manager has a built-in function to download files?

Thank you very much!

1 Answer, 1 is accepted

Guillermo

commented on 26 Jun 2024, 02:50 PM

Hi Martin,

Thanks for your reply.

I changed the Kendo version as you suggested and that got rid of the duplicated issue. Thank you for that!

However, even if there're no duplicated folders anymore, when I select the "General" folder, it opens a new instance of the same folder and I can't see the actual contents.

Something I noticed is that if I bind the data locally, it does work, using the same JSON returned by the REST service. Please look at the following:

Local Bind:

// Copied the response from the service:
var jsonString = `
[
{
"name":"General"
,"isDirectory":true
,"hasDirectories":true
,"path":"folder"
,"extension":" "
,"size":90
,"createdUtc":"\/Date(1718637638946)\/"
,"items":[
{
"name":"Test Folder 2"
,"isDirectory":true
,"hasDirectories":false
,"path":"folder\/Test Folder 2"
,"extension":" "
,"size":8820
,"createdUtc":"2024-06-18T20:56:13Z"
}
,{
"name":"TestFolder1"
,"isDirectory":true
,"hasDirectories":false
,"path":"folder\/TestFolder1"
,"extension":" "
,"size":0
,"createdUtc":"2024-06-07T19:52:48Z"
}
,{
"name":"File1.pdf"
,"isDirectory":false
,"hasDirectories":false
,"path":"folder\/File1.pdf"
,"extension":".pdf"
,"size":689541
,"createdUtc":"2024-06-07T19:52:37Z"
}
,{
"name":"File2.pdf"
,"isDirectory":false
,"hasDirectories":false
,"path":"folder\/File2.pdf"
,"extension":".pdf"
,"size":312498
,"createdUtc":"2024-06-07T19:52:37Z"
}
,{
"name":"File3.xlsx"
,"isDirectory":false
,"hasDirectories":false
,"path":"folder\/File3.xlsx"
,"extension":".xlsx"
,"size":107150
,"createdUtc":"2024-06-07T19:52:38Z"
}
,{
"name":"File4.msg"
,"isDirectory":false
,"hasDirectories":false
,"path":"folder\/File4.msg"
,"extension":".msg"
,"size":376832
,"createdUtc":"2024-06-07T19:52:37Z"
}
]
}
]
`;
// Make it a JSON
var myData = JSON.parse(jsonString);
// Init the FM
$("#filemanager").kendoFileManager({               
    dataSource: {
      schema: kendo.data.schemas.filemanager,
      data: myData
    }
});

Results in:

Remote Bind:

$("#filemanager").kendoFileManager({
    dataSource: {
        schema: kendo.data.schemas.filemanager,
        transport: {
            read: {
                url: "https://my_service/document/teams",
                method: "GET",
                dataType: "json"
            }
        }
    }
});

Results in:

When I selected the "General" folder (double clicked on it) I saw 2 "xhr" calls in the Network tab, adding additional parameters to the original REST service:

Could you please help me understand why works locally but not remotely?

I'll look at the Knowledge Base for the download feature.

Thank you!

Guillermo.