Make a File Tree Browser with AJAX and JSTree

jsTree is a neat little tool that provides a tree interface in the browser. This is great for browsing images and other media.

Here is a basic example to get you started with jsTree. This example makes AJAX requests to a server. The server responds with JSON, which is used to populate the tree.

I provided extra comments to explain what I’m doing here.

<div id="tree-browser"></div>
//This is how the tree browser gets initialized.
    'core' : {
        'data' : function(node, datacb) {
            //This function gets called when a folder is expanded
            //Pass an array of objects to datacb to populate the folder

            var req_folder =;
            if ('#') {
                req_folder = 'root';

                type: 'GET',
                dataType: 'json',
                data: { requested_folder: req_folder }
            }).done(function(result) {
                if (result.success != 'true')
                    throw "Request for folder contents failed";

                var files =;
                var i, file_list = [];
                for (i = 0; i < files.length; i++) {
                    var file = files[i];
                        'id': file.public_id,
                        'icon': file.icon, //custom icon url for the node
                        'text':, //node text
                        'children': file.is_folder,

                        //extra data can be stored in the 'data' field
                        'data': {
                            'url': file.file_url
      , file_list);

That’s all there is to it. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.