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 Browser is a plugin for creating operating system OS like file browsers.

Must Read – HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

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());
    }
});

Must Read – Simple jQuery Multiple File Image Upload With Preview Plugin

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)

Must Read – Fuzzy Searches Like Sublime or phpstorm Directory Plugin for jQuery

Options

  • name – used to distinguish different filesystem for copying nad moving files (rename)
  • dir – function that should return a promise that resolve to object {files: <ARRAY>, dirs: <ARRAY>} or return that object
  • exists – function that will return true/false or a promise that resolve to true/false that indicate if file or directory exists (used when create new file/directory)
  • separator – path separator (a string) usualy / or \ (to use \ you need to put '\\') default /
  • root – root of the filesystem, it can be any path like /home/<user>, default /
  • change – callback function that’s called on refresh of the directory
  • init – callack executed on initalization of the plugin
  • item_class – function that should return addiional classes for the element (directory or file) you can use this to have different icons for C or D drive that’s in root directory, see windows example
  • dbclick_delay – if the time of the second click is lower then this but hight then rename_delay it’s consider as action for rename a file or directory
  • open – callback function executed with path of the file when you double click on the file
  • rename – callback function called with old path nad new path when you rename a file or directory
  • remove – callback function called with path when you delete file or directory
  • create – callback called with path of the new file or directory and string ‘directory’ or ‘file’ as second argument
  • copy – callback executed when you copy a file using CTRL+C and CTRL+V
  • upload – callback called with file object and the path when you drag and drop a file or directory to browser container, you can also drag into visible directory
  • error – called when error accured like when you try to enter invalid path in address bar
  • refresh_timer – timeout after fetch of the content of the file in miliseconds, used to see visible refresh when you change direcotry (you can set it to 0), default 100
  • menu – should return object which keys are names of the context menu and values are other object (they will create submenus) or a function that will be executed when menu item is click it acceppt single argument string ‘li’ or ‘content’ depend if you click on file/directory or on empty browser space. 

Must Read – Custom Scroll To Top Button In Your Website Using JavaScript | dyScrollUpJS

API methods

  • path – return current path
  • name – return settings name
  • back – go back one directory
  • destroy – remove all events and DOM nodes
  • create – function(type, [path]) – create new directory of file (depend of first argument which is string ‘file’ or ‘directory’) if there is second argument it will create new file/directory of it’s undefined it will create placeholder for file/directory with textarea to enter name
  • copy – selected files/directories for later paste
  • cut – like copy but when call paste it will remove old items
  • paste – 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
  • up – go up one directory
  • show – call settings.dir and rerender the directory view
  • join – return new path based on settings.separator and settings.root, accept any number of arguments
  • split – split the path using settings.separator and settings.root
  • walk – function(filename, fn) – call 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.

Mac OS Like Directory Plugin, File Browser Github

Read More – 

Virtual macOS Keyboard With Click Sounds And Speech Recognition
[Browser] jQuery Shell Terminal Emulator Plugin | Shelly


See Demo And Download

Official Website(jcubic): Click Here

This superior jQuery/javascript plugin is developed by jcubic. For extra Advanced Usages, please go to the official website.

Share