File Browser Widget
filebrowser.htm
(hint: right click, save as)
1<!--
2 Test/Development/Documentation page
3 - enable web server file access
4 - upload to web file path, e.g. /sd/dev/filebrowser.htm
5 - open in framework by e.g. http://test1.local/#/dev/filebrowser.htm
6-->
7
8<style>
9/* Note: set height or min-height on the filebrowser tbody.
10 Default height by class "filebrowser" is 310px (each file row has a height of 31px with the default font size) */
11#myfilebrowser tbody {
12 height: 35vh;
13}
14</style>
15
16<div class="panel panel-primary">
17 <div class="panel-heading">FileBrowser Test/Demo</div>
18 <div class="panel-body">
19
20 <div class="filebrowser" id="myfilebrowser" />
21
22 <hr/>
23 <pre id="log"/>
24 <button type="button" class="btn btn-default" id="action-setpath">Set path to /sd/logs/log</button>
25 <button type="button" class="btn btn-default" id="action-stopload">Stop loading dir</button>
26 <button type="button" class="btn btn-default" id="action-filteron">Filter *.zip</button>
27 <button type="button" class="btn btn-default" id="action-filteroff">Filter off</button>
28 <button type="button" class="btn btn-default" id="action-sortoff">Sort off</button>
29 <p>Note: the test widget is configured to stop/inhibit loading on selection of a ".txt" file or a directory matching "DCIM".</p>
30 </div>
31</div>
32
33<script>
34
35// =======================================================================================
36// FileBrowser Widget:
37//
38// Test/demo of init with all options.
39// Note: you can init a filebrowser without any options.
40// Defaults are path & quicknav as shown below, no sorting, no callbacks.
41//
42// The input object passed to all callbacks contains these fields:
43// - path -- the full path (dir + "/" + file)
44// - file -- the file part of the currently selected path
45// - dir -- the directory part of the currently selected path
46// - noload -- set to true to inhibit directory loading (see onPathChange)
47//
48// Note: path, file & dir are unvalidated user input.
49//
50// Note on sorting: disabling initial sorting improves user interaction while loading the
51// directory, i.e. to select files/dirs while the loader is running. This may
52// be an option especially for large directories. The user can still sort manually.
53//
54// Methods:
55// - getInput() -- retrieve input object
56// - setPath(newpath, reload) -- add trailing slash to enter dir w/o file selection
57// - sortList(by, dir) -- sort file list
58// - loadDir() -- trigger directory reload
59// - stopLoad() -- abort directory loading
60// - newDir() -- open create directory sub dialog
61//
62
63$('#myfilebrowser').filebrowser({
64 path: '/sd/',
65 quicknav: ['/sd/', '/store/'],
66 filter: null, // see Filter examples below
67 sortBy: "name", // …or "size" or "date" or null (disable)
68 sortDir: 1, // …or -1 for reverse
69 onUpdate: function(input) {
70 // This is called after any widget configuration update, use for custom extensions.
71 $('#log').append('onUpdate: ' + JSON.stringify(input) + '\n');
72 },
73 onPathChange: function(input) {
74 // Called whenever the path changes.
75 $('#log').append('onPathChange: ' + JSON.stringify(input) + '\n');
76 // To inhibit loading the directory for the new path, set input.noload to true:
77 if (input.dir.indexOf("DCIM") >= 0 || input.file.indexOf('.txt') >= 0) {
78 $('#log').append('inhibiting directory loading\n');
79 input.noload = true;
80 }
81 },
82 onAction: function(input) {
83 // This is called when the user doubleclicks an entry or presses Enter in a directory:
84 $('#log').append('onAction: ' + JSON.stringify(input) + '\n');
85 },
86});
87
88$('#action-setpath').on('click', function(ev) {
89 $('#myfilebrowser').filebrowser('setPath', '/sd/logs/log', true);
90});
91$('#action-stopload').on('click', function(ev) {
92 $('#myfilebrowser').filebrowser('stopLoad');
93});
94$('#action-sortoff').on('click', function(ev) {
95 $('#myfilebrowser').filebrowser('sortList', '');
96});
97
98// Filter example:
99$('#action-filteron').on('click', function(ev) {
100 $('#myfilebrowser').filebrowser({
101 // The list filter may be given as a string (regular expression applied to file name):
102 filter: "\\.zip$",
103 // A string filter always lists directories.
104
105 // For advanced usage, you may alternatively specify a filter callback like this:
106 // filter: function(f) { return f.isdir || f.name.match("\\.zip$"); }
107 // The function is called per list entry object with…
108 // - isdir: true = is sub directory
109 // - name: the name part (file or directory, dir with trailing '/')
110 // - path: the full path of this entry
111 // - size: formatted size ('6.8k')
112 // - date: formatted date ('23-Nov-2018 17:42')
113 // - bytes: size in bytes, -1 for directories
114 // - isodate: ISO style date 'YYYY-mm-dd HH:MM'
115 // - class: '', can be used to add a custom row class
116 // Return true to allow the entry to be added to the list.
117
118 // Note: list filters do not restrict the allowed path input. To do so,
119 // register onPathChange or onAction and check the input in your callback.
120 // See FileDialog widget "select" option handling for an example.
121 });
122});
123$('#action-filteroff').on('click', function(ev) {
124 $('#myfilebrowser').filebrowser({
125 filter: null
126 });
127});
128
129</script>