Build a file tree explorer with jQuery and ASP.NET

I recently discovered a great jQuery plugin called jQuery File Tree. With this plugin and a little server side logic, it is very easy to create a great looking client side file tree explorer. This article explains how to configure and customize jQuery File Tree.

First some credit to Cory LaViska for authoring the plugin and making it freely available on his site. jQuery File Tree is a highly customizable jQuery file browser plugin that allows you to create a beautiful file tree with as little as one line of code. The plugin utilizes server side logic to retrieve the file structure. These server side scripts are referred to as "connector scripts" on the blog page for jQuery File Tree. Connector scripts are available for the following languages, C#, PHP, JSP, VBScript, CF, Lasso, Python, and Ruby. To get started with using the plugin, download the zip file using the above link.

In the download are the jquery file, various server side files, the images folder that holds the icons for the tree, and a css file. I copied the js file into a scripts directory, the images into my images folder, and the css file into my css folder. I did not use the C# connector file. Instead I authored a VB.NET file to retrieve the file structure. I'll share the vB.NET code in this article.

Create a new file - I called it jqueryfiletree.aspx. In this file add the script tags and link tag as follows:

<link href="../path/to/jqueryFileTree.css" rel="stylesheet" type="text/css" />
<script src="../path/to/jqueryFileTree.js" type="text/javascript"></script>
<script src="../path/to/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('#divFileTree').fileTree({
            root: '/foldername/',
            script: 'filetree.aspx',
            expandSpeed: 1000,
            collapseSpeed: 1000,
            multiFolder: false
        }, function(file) {
            alert(file);
        });
    });


</script>
 

Add the following html: 

<div id="divFileTree"></div>

In the above code, the paths to the js and css files are specified. The next block of code initlizes the plugin on the div with optional parameters specified. The root parameter specifies the directory from which to retieve the files and folders. The script paramter is the location of the connector script. The next two options, expandSpeed and collapseSpeed are self explanatory. The multiFolder option determines whether or not to limit the browser to one folder at a time. Lastly, when a file is clicked the alert appears with the path to the file.

Next create a aspx file and delete the html from it. Add the following:

The server side code accepts a post variable (dir) and creates an unordered list of the files and folders in the specified directory. The C# version in the download utilizes Response.Write. I elected to use the stringbuilder class instead. The value of the root parameter is passed to the connector script - this is the directory that will be displayed.

Custom server side scripts can be writtem for any language as long as it accepts the POST variable dir and outputs an unordered list in the form:

<ul class="jqueryFileTree" style="display: none;">
    <li class="directory collapsed"><a href="#" rel="/this/folder/">Folder Name</a></li>
    (additional folders here)
    <li class="file ext_txt"><a href="#" rel="/this/folder/filename.txt">filename.txt</a></li>
    (additional files here)
</ul>

To get the images to display in the file tree, be sure to edit the paths to the images in CSS file so that it is right for your file structure. The file ree also supports easing if an appropriate jQuery easing plugin is used.

The connector scripts provided read the folder structure of a directory. Although this is typically harmless, someone could spoof the root parameter and view a directory he/she should not see. It is strongly recommended that some form of check to the connector script be added to verify the path being read is a path that visitors can see.

A live demo is here