File Browser Widget

filebrowser.htm (hint: right click, save as)

<!--
  Test/Development/Documentation page
  - enable web server file access
  - upload to web file path, e.g. /sd/dev/filebrowser.htm
  - open in framework by e.g. http://test1.local/#/dev/filebrowser.htm
-->

<style>
/* Note: set height or min-height on the filebrowser tbody.
   Default height by class "filebrowser" is 310px (each file row has a height of 31px with the default font size) */
#myfilebrowser tbody {
  height: 35vh;
}
</style>

<div class="panel panel-primary">
  <div class="panel-heading">FileBrowser Test/Demo</div>
  <div class="panel-body">
    
    <div class="filebrowser" id="myfilebrowser" />
    
    <hr/>
    <pre id="log"/>
    <button type="button" class="btn btn-default" id="action-setpath">Set path to /sd/logs/log</button>
    <button type="button" class="btn btn-default" id="action-stopload">Stop loading dir</button>
    <button type="button" class="btn btn-default" id="action-filteron">Filter *.zip</button>
    <button type="button" class="btn btn-default" id="action-filteroff">Filter off</button>
    <button type="button" class="btn btn-default" id="action-sortoff">Sort off</button>
    <p>Note: the test widget is configured to stop/inhibit loading on selection of a ".txt" file or a directory matching "DCIM".</p>
  </div>
</div>

<script>

// =======================================================================================
// FileBrowser Widget:
// 
// Test/demo of init with all options.
// Note: you can init a filebrowser without any options.
// Defaults are path & quicknav as shown below, no sorting, no callbacks.
// 
// The input object passed to all callbacks contains these fields:
//  - path          -- the full path (dir + "/" + file)
//  - file          -- the file part of the currently selected path
//  - dir           -- the directory part of the currently selected path
//  - noload        -- set to true to inhibit directory loading (see onPathChange)
// 
// Note: path, file & dir are unvalidated user input.
// 
// Note on sorting: disabling initial sorting improves user interaction while loading the
//  directory, i.e. to select files/dirs while the loader is running. This may
//  be an option especially for large directories. The user can still sort manually.
// 
// Methods:
//  - getInput()                  -- retrieve input object
//  - setPath(newpath, reload)    -- add trailing slash to enter dir w/o file selection
//  - sortList(by, dir)           -- sort file list
//  - loadDir()                   -- trigger directory reload
//  - stopLoad()                  -- abort directory loading
//  - newDir()                    -- open create directory sub dialog
// 

$('#myfilebrowser').filebrowser({
  path: '/sd/',
  quicknav: ['/sd/', '/store/'],
  filter: null,       // see Filter examples below
  sortBy: "name",     // …or "size" or "date" or null (disable)
  sortDir: 1,         // …or -1 for reverse
  onUpdate: function(input) {
    // This is called after any widget configuration update, use for custom extensions.
    $('#log').append('onUpdate: ' + JSON.stringify(input) + '\n');
  },
  onPathChange: function(input) {
    // Called whenever the path changes.
    $('#log').append('onPathChange: ' + JSON.stringify(input) + '\n');
    // To inhibit loading the directory for the new path, set input.noload to true:
    if (input.dir.indexOf("DCIM") >= 0 || input.file.indexOf('.txt') >= 0) {
      $('#log').append('inhibiting directory loading\n');
      input.noload = true;
    }
  },
  onAction: function(input) {
    // This is called when the user doubleclicks an entry or presses Enter in a directory:
    $('#log').append('onAction: ' + JSON.stringify(input) + '\n');
  },
});

$('#action-setpath').on('click', function(ev) {
  $('#myfilebrowser').filebrowser('setPath', '/sd/logs/log', true);
});
$('#action-stopload').on('click', function(ev) {
  $('#myfilebrowser').filebrowser('stopLoad');
});
$('#action-sortoff').on('click', function(ev) {
  $('#myfilebrowser').filebrowser('sortList', '');
});

// Filter example:
$('#action-filteron').on('click', function(ev) {
  $('#myfilebrowser').filebrowser({
    // The list filter may be given as a string (regular expression applied to file name):
    filter: "\\.zip$",
    // A string filter always lists directories.
    
    // For advanced usage, you may alternatively specify a filter callback like this:
    //  filter: function(f) { return f.isdir || f.name.match("\\.zip$"); }
    // The function is called per list entry object with…
    // - isdir: true = is sub directory
    // - name: the name part (file or directory, dir with trailing '/')
    // - path: the full path of this entry
    // - size: formatted size ('6.8k')
    // - date: formatted date ('23-Nov-2018 17:42')
    // - bytes: size in bytes, -1 for directories
    // - isodate: ISO style date 'YYYY-mm-dd HH:MM'
    // - class: '', can be used to add a custom row class
    // Return true to allow the entry to be added to the list.
    
    // Note: list filters do not restrict the allowed path input. To do so,
    // register onPathChange or onAction and check the input in your callback.
    // See FileDialog widget "select" option handling for an example.
  });
});
$('#action-filteroff').on('click', function(ev) {
  $('#myfilebrowser').filebrowser({
    filter: null
  });
});

</script>