jQueryFileExplorer
Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree.
Split.js is included and used to provide split function. It can be excluded if panel resize is not required.
DEMO
Usage
$(selector).jQueryFileExplorer({
root: "/",
rootLabel: "Server",
script: "https://localhost:44316/FileExplorer/GetPath",
fileScript: "https://localhost:44316/FileExplorer/GetPath"
});)
Parameters:
- root: the path of the root passed to the backend url or function
- rootLabel: the label of the root shown in the file explorer
- script: the URL or a function that returns the content of a folder.
- fileScript: a function or a download URL triggered when a file is clicked.
Note:
- If the script/fileScript is a function, an object parameter {path: 'path'} is passed to the function. If the script/fileScript is a URL, a parameter 'path' with the path of the clicked folder/file is passed to the URL via POST(for folders) or GET(for files).
- The content of a folder returned from the URL or function should be an array of objects like this:
[
{
label: string (e.g.: 'folder1' or 'pic.jpg')
ext: string (e.g.: 'jpg'):
path: string (e.g.: 'C:/Windows' or 'C:/Temp/pic.jpg')
isFolder: bool
isDrive: bool
hasSubfolder: bool
subitems:array of string (e.g.: ['1/1/2021', '100,000'])
},
...
]
Screenshot
12 Dec 12, 2022
21 Aug 8, 2022
2 Jan 5, 2022
2 Mar 20, 2022
53 Dec 21, 2022
4 Jun 15, 2022
11 Dec 9, 2022
20 Dec 15, 2022
19 Nov 9, 2022
8 Dec 31, 2022