Mac OS Like Directory / File Browser Plugin For jQuery - File Browser

File Size: 829 KB
Views Total: 2584
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mac OS Like Directory / File Browser Plugin For jQuery - File Browser

A lightweight jQuery plugin which gives you the possibility to create a dynamic, draggable, Mac OS like directory browser for browsing through files on the webpage.

How to use it:

1. Load the needed jQuery and jQuery UI libraries in the html page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Load a jQuery UI theme of your choice in the header of the page.

<link href="" rel="stylesheet">

3. Load the jQuery File Browser's JavaScript and CSS files in the page.

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

4. Create an input field to display the current directory path.

<input id="path">

5. Create a DIV placeholder for the file browser.

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

6. Add your own 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') {
          } else if ($.isPlainObject(dir[key])) {
    item_class: function(path, name) {
      return name.match(/[A-Z]:/) ? 'drive' : '';
    open: function(filename) {
      var file = get(filename);
      if (typeof file == 'string') {
      } else {
        throw new Error('Invalid filename');
    on_change: function() {

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 methods.

// returns current path

// returns settings name

// goes back

// destroy the plugin

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

// selected files/directories for later paste

// like copy but when call paste it will remove old items

// 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

// goes up one directory

// rerenders the directory view

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

// splits the path

// 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)


v0.8.4 (2021-05-09)

  • fix exception on dragging

v0.8.3 (2021-02-04)

  • check if menu plugin from jQuery exists before calling

v0.8.2 (2018-09-06)

  • fix rename when file start with the same string
  • fix jQuery version

v0.8.1 (2018-06-11)

v0.8.0 (2017-09-10)

  • context menu
  • allow to create new file/directory
  • markdown icon
  • few bug fixes
  • Dynamic overwritable contextmenu
  • Check if file/directory exists

v0.7.3 (2017-09-02)

  • fix error while reading `then` from dir if don't return a promise
  • prevent opening file on enter when focus in adress bar

v0.7.1 (2017-04-17)

  • Drag & Drop upload + defer based processing
  • Some missing changes

v0.6.6 (2016-12-27)

  • Fix opening opening file/directories by double click and drag and drop in Firefox

v0.6.5 (2016-12-22)

  • Fix enter on active icon
  • Small css fixes and add copyright notice to minified css files
  • Fix renaming and refresh all widgets if they have same name and path

v0.6.0 (2016-12-21)

  • Fix draging selection
  • Improve keyboard navigation
  • Add selection by space
  • Renaming with clicking on name of the file/directory
  • Fix rectangle selection when icons don't take all space of the container

v0.5.2 (2016-12-19)

  • Fix selection of the widget
  • Fix rectangle selection when parent of the widget is scrolled down

v0.5.0 (2016-12-18)

  • allows for Dragging selection

v0.4.0 (2016-12-12)

  • fix cut/copy, drag and drop

v0.3.0 (2016-12-11)

  • Moving/copying files using copy/cut/paste and new api methods

v0.2.0 (2016-12-09)

  • Added missing resolve

This awesome jQuery plugin is developed by jcubic. For more Advanced Usages, please check the demo page or visit the official website.