jQuery File Browser

jQuery File Browser is a versatile jQuery plugin designed for creating file browser interfaces that resemble operating system file managers. This plugin provides an interactive environment for users to navigate files and directories seamlessly.

Key Features

• User-Friendly Interface: Mimics traditional file system navigation, making it intuitive for users.
• Promise-Based API: All user functions that modify directories, such as create, remove, copy, and rename, return a promise. This enhances the functionality and allows automatic view refreshing once a promise is resolved.
• Extensible Options: Customize behavior and appearance using various options. For instance, users can implement context menus, specify root directories, and define callbacks for specific actions.

Essential Configuration

To initiate the jQuery File Browser plugin, it requires jQuery and optionally jQuery UI for context menu capabilities. Basic initialization example:

$(function() {
    var browse = $('#browser').browse({
        root: '/',
        separator: '/',
        contextmenu: true,
        dir: function(path) {
            return new Promise(function(resolve, reject) {
                if (path == '/') {
                    resolve({dirs: ['foo', 'bar'], files: []});
                } else if (path == '/foo/') {
                    resolve({dirs: [], files: ['baz', 'quux']});
                } else if (path == '/bar/') {
                    resolve({dirs: [], files: ['lorem', 'ipsum']});
                } else {
                    reject();
                }
            });
        },
        open: function(filename) {
            console.log('opening ' + filename);
        }
    });
});

Available Options

• name: Distinguishes different filesystems for operations like copy and move.
• dir: A function returning a promise that resolves to a file and directory structure.
• open: A callback triggered on file opening.
• menu: A customizable context menu for right-click actions.

Demo

Explore live demos to see the jQuery File Browser in action:

• Simple, Fake FS Demo
• Lightning-fs + Service Worker Demo

For further examples and detailed usage, refer to the examples directory.

This plugin stands out due to its flexibility and ease of integration, making it an excellent choice for developers looking to implement file browsing functionality in web applications.