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') {
          } 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 strategies.

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

Mac OS Like Directory Plugin, File Browser Github

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.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…