File manager app script / resources?
Hi Sean / team / et al..
In the demos you provide an example layout for a file manager:
https://preview.keenthemes.com/metronic8/demo20/apps/file-manager/files/.html
I looks to be built off dataTables, with some mods. Also, within the HTML you reference "data-kt-filemanager-table", which I can see indicates some JS getElementBy method that I've located as a library in the custom/apps/file-manager/list section of the demo files. It looks fully fledged, but I'm having troubles understanding how your scripts are handling folders vs files.
Is there some smarts in the file list script that is treating folders differently (a dataTable feature), or is the link for a folder object used to re-get/AJAX a new list of items for the dataTable?
I ask because dataTables has the ability to grab a list of items and paginating these (keeping them in DOM and managing client side) without needing server side calls for every new page. However, I'm not sure if or how that could be done for folders.
Am I missing something? Does your app/file-manager/list.js script handle folders different to files all at the client-side, or do I need to customise the script to make a new server-side call when a user clicks on a folder item?
Much appreciated
Replies (5)
Hi,
If you take a look at the example list in the HTML file here;
/html/demo1/dist/apps/file-manager/files.html
Look for the table id "kt_file_manager_list". You can see here that table content is hard coded in the table. We do not use a server-side data source. You will need to create a script to get the files/folders list from db.
<img src="https://i.ibb.co/Tt16Gsp/image.png" alt="image" border="0">
Thanks
Ok thanks for confirming.
However, I don't think the demo hard coded pages are the basis for determining this. I know all the items displayed in the demos are hard coded. I have downloaded and am working on the packages.
However, the hard coded pages are relevant for the compiled demo versions only, and do not reflect accurately on the full capability from the src folders (before consolidating with gulp/webpack). There are a ton of helper scripts and the demos don't fully reflect all the capability of the scripts.
(In the demo, these helper scripts are compiled into the global script. )
The helper scripts go *above and beyond* the hard coding of the demo HTML pages. In many cases, I've been able to use the Metronic scripts to achieve a bunch of things *beyond* what the demo pages do. However, in order to achieve this, I've had to go line by line through the Metronic scripts, which is tricky and massively time consuming.
Hi,
Thanks for your feedback. We will take them into account in a future update.
Agree, Metronic has a bunch of custom scripts most for demonstration purposes. Those custom scripts written for the apps or pages are supposed to be used as a starting point or reference for the provided UI and it's up to the user to use them as a base or refactor to the specific project needs.
However, our Gulp/Webpack builders allow reducing the bundle size by removing unused plugins as explained here.
I would suggest you customize your build and keep only required plugins in scripts.bundle.js and style.bundle.css and custom scripts you can revise, adapt, and include pages on demand, those custom js of apps, pages are not bundled in the global bundle.
If you need any further assistance please let us know.
Regards.
Hi,
You can take a look at the JS file. The file is located here;src/js/custom/apps/file-manager/list.js
The datatable loads the hardcoded table from HTML files, similar to this datatable init method https://datatables.net/examples/basic_init/zero_configuration.html
You can check the file with the HTML table here;
- html/demo1/dist/apps/file-manager/folders.html
- html/demo1/dist/apps/file-manager/files.html
We do not use server-side data sources for datatable. You have to customize it to make it server-side.
Thanks
Hi Faizal
Thanks - but it doesn't get to the nub of my question.
I've got no problems using server side, and I understand how dataTables works. However, I'm not clear on the customisation that Metronic layers on top.
Specifically, how *Metronic's customised file manager script* "custom/apps/file-manager/list.js" deals with folders vs files. It currently has a separate tableconfig variable: const foldersListOptions = {}
I'm assuming that somewhere in Metronics, which I'm overlooking, that it looks at the filepath retrieved from the DB, (ie a literal path is returned from the query "path\uploadFolders\pictures\img.png", that Metronic script would replicates a folder structure in dataTables based on the query returned path text.
If this is not the case, then I'll need to create a script that does this.. but I didn't want to start re-inventing the wheel if it's already in the Metronic scripts.
Can you confirm if there's some functionality in the Metronic scripts in how it layers over the dataTables library, to manage file paths as folders?
Thanks
