jQuery File Browser Plugin for Creating OS Like File Browsers

File Browser is a lightweight jQuery plugin that gives you the ability to create a dynamic and draggable Mac OS like directory browser to browse files on a web page.

jquery file manager, jquery folder browser, ajax file browser, create file browser in javascript, php file browser example, jquery list files in directory example

How to make use of it:

1. Load the wanted jQuery and jQuery UI libraries within the HTML web page.

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. Load a jQuery UI theme of your alternative within the header of the web page.

<link href="http://code.jquery.com/ui/1.12.1/themes/THEMENAME/jquery-ui.css" rel="stylesheet">

3. Load the jQuery File Browser’s JavaScript and CSS files within the web page.

<link href="jquery.filebrowser-src.css" rel="stylesheet">
<script src="jquery.filebrowser-src.js"></script>

4. Create an input subject to show the present listing path.

<input id="path">

5. Create a DIV placeholder for the file browser.

<div id="browser"></div>

6. Add your individual directories and files to the file browser.

var env = {
  'bin': {
    'bash': 'bash content',
    'python': 'python content',
    'perl': 'perl content',
    'find': 'find content',
    'share': {
      'foo': 'hello foo',
      'bar': 'hello bar',
      'lib': {
        'asd': 'foo bar'
      }
    }
  },
  /*
  'C:': {
    'foo': 'hello foo'
  },
  //*/
  'foo': {
    'page.html': '<html></html>',
    'style.css': 'body { overflow: scroll; }'
  },
  'bar.svg': 'Foo',
  'baz.txt': 'Hello',
  '1.json': '',
  '2.js': '',
  '3.css': '',
  '4.doc': '',
  '5.html': '',
  '6.pdf': '',
  '7.jpg': '',
  '8.gif': '',
  '9.php': '',
  '10.xls': '',
  '11.ppt': ''
}

7. Active the file browser.

var browse = $('#browser').dialog().browse({
    root: '/',
    separator: '/',
    dir: function(path, callback) {
      dir = get(path);
      if ($.isPlainObject(dir)) {
        var result = {files:[], dirs: []};
        Object.keys(dir).forEach(function(key) {
          if (typeof dir[key] == 'string') {
            result.files.push(key);
          } else if ($.isPlainObject(dir[key])) {
            result.dirs.push(key);
          }
        });
        callback(result);
      }
    },
    item_class: function(path, name) {
      return name.match(/[A-Z]:/) ? 'drive' : '';
    },
    open: function(filename) {
      var file = get(filename);
      if (typeof file == 'string') {
        alert(file);
      } else {
        throw new Error('Invalid filename');
      }
    },
    on_change: function() {
      $('#path').val(this.path());
    }
});

8. All default settings for the file browser.

var browse = $('#browser').dialog().browse({

    // returns a promise that resolve to object {files: <ARRAY>, dirs: <ARRAY>} or return that object
    dir: function() {
      return $.when({files:[], dirs: []});
    },

    // custom name
    name: 'default',

    // root of the filesystem
    root: '/',

    // path separator
    separator: '/',

    // shows labels
    labels: true,

    // callback functions
    change: $.noop,
    init: $.noop,
    open: $.noop,
    rename: $.noop,
    create: $.noop,
    remove: $.noop,
    copy: $.noop,
    exists: $.noop,
    upload: $.noop,
    error: $.noop,

    // returns addional classes for the element
    item_class: $.noop,

    // delay in milliseconds
    rename_delay: 300,
    dbclick_delay: 2000,
    
    // return object which keys are names of the context menu and values are other object
    menu: function(type) {
      return {};
    },

    // refresh interval
    refresh_timer: 100

});

9. API strategies.

// returns current path
browse.path()

// returns settings name
browse.name()

// goes back
browse.back()

// destroy the plugin
browse.destroy()

// create a new directory
create(type, [path])

// selected files/directories for later paste
browse.copy()

// like copy but when call paste it will remove old items
browse.cut()

// if cut was executed it will call settings.rename and if copy was called it will call settings.copy and then refresh all views with the same directory
browse.paste()

// goes up one directory
browse.up() 

// rerenders the directory view
browse.show()

// returns new path based on settings.separator and settings.root, accept any number of arguments
browse.join()

// splits the path
browse.split()

// calls function for each file/directory the signature for callaback function: function(path_part, last, return_value) the function return value from last call to callback function, 3rd argument is a value from previous call to callback function.
walk(filename, fn)

Mac OS Like Directory Plugin, File Browser Github