prototype File Tree plugin

Please note:

A new version of the plugin is available here (v. 1.1).

The new jQuery Form Validator plugin is available here (v. 1.0).


I just finished writing my first plugin for prototype. A fully customizable, Ajax-powered, file tree. It may be used together with prototype and to render a dynamic file system browser in your web applications.


  • Produces valid and semantic XHTML (1.1)
  • Can be customized via CSS scripting
  • Uses for the rendering of visual effects
  • Transitions are customizable:
    • Change toggle effect style and speed
    • Change transition effect, even using external plugins for
  • Different file types are displayed with different (meaningful) icons
  • Support for unobtrusive javascript
  • Support for different browsers
  • Connectors for PHP and Ruby on Rails (read more below)


You can download the v. 1.0 of the plugin (1 April 2008).

You can now download the v. 1.1 of the plugin (17 January 2009).


You can find a working demo of the plugin at this page.


This plugin requires both the prototype and the frameworks to work. It has only been tested with the latest versions ( for prototype and 1.8.1 for

However, it should work at least with prototype >= 1.6 and >= 1.8.


The plugin has been tested on Windows XP and Mac OS X 10.5 and is fully supported (at least) on the following browsers:

  • IE 7 & 6
  • Firefox 2.0 and 3.0 beta
  • Opera 9 and 9.5 beta
  • Safari

It is also partially compatible with IE 5.5 (still using it???)


prototype File Tree is a plugin for prototype which extends the basic functions of the Element class. In its simplest form it can be used with:

$('myElementId').fileTree({}, function(file) { alert(file); });

This code creates the default file tree in the element with id
myElementId. Notice that the options parameter is empty. The possible options are:

  • root – root folder to display
    • default = ‘./’
  • script – location of the serverside AJAX file to use
    • default = prototypeFileTree.php
  • transitionStyle – one of the default effect styles: ‘appear’, ‘blind’ or ‘slide’
    • default = ‘blind’
  • transitionEffect – one of the transition effects from or from a plugin
    • default = Effect.Transitions.sinoidal
  • expandSpeed – folder expanding speed in seconds
    • default = 0.3
  • collapseSpeed – folder collapsing speed in seconds
    • default = 0.3
  • folderEvent – event to trigger expand/collapse
    • default = ‘click’
  • loadMessage – the message to display while initial tree loads (can be HTML)
    • default = ‘Loading…’


An example of a complex call can be:

root: './my/private/folder/',
script: '',
transitionStyle: 'slide',
transitionEffect: Effect.Transitions.easing
expandSpeed: 0.5,
collapseSpeed: 1,
folderEvent: 'dblclick',
loadMessage: 'Looking for data...'
}, callbackFunction)

function callbackFunction(file) {
// My custom code here for file selection

You can see in this example that we are calling the Effect.Transitions.easing transition. This is not included with the standard framework, but a good implementation can be found at this page.


The plugin is provided with two connectors, prototypeFileTree.php and filetree_controller.rb. These are the remote scripts you can use to handle the remote Ajax call for filling the file browser upon request. The PHP connector is very simple and can be used as is. The Ruby on Rails connector is in fact a controller which handles the request through the action dir. It must be used together with a simple view (eg. dir.rhtml) in which you can put this simple code:

<%= @text %>

Terms of use

prototype File Tree is licensed under a Creative Commons License and is copyrighted (C)2008 by Daniele Di Bernardo.

The license page can be found at:


This plugin takes inspiration from jQuery File Tree from Cory S.N. LaViska (A Beautiful Site –, and is released under the same license (share-alike).