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

26.079 thoughts on “prototype File Tree plugin

  1. Do you have a spam issue on this site; I also am a blogger, and I was wanting to
    know your situation; we have developed some nice methods and we are looking to trade solutions with
    others, why not shoot me an e-mail if interested.

  2. I found your blog website on google and check just a few of your early posts. Continue to keep up the very good operate. I simply extra up your RSS feed to my MSN Information Reader. Seeking ahead to studying extra from you afterward!

  3. Excellent items from you, man. I’ve have in mind your
    stuff previous to and you’re just extremely magnificent. I actually like what you have bought here,
    really like what you’re saying and the best way in which you say it.
    You are making it enjoyable and you still take care of
    to stay it sensible. I cant wait to learn much more from you.
    This is really a great web site.

  4. Hi there are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding knowledge to make your own blog? Any help would be really appreciated!|

  5. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why waste your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?|

  6. May I just say what a relief to find someone who actually knows what they are talking about over the internet. You certainly realize how to bring an issue to light and make it important. More and more people need to check this out and understand this side of the story. I can’t believe you are not more popular given that you surely possess the gift.|

  7. Thanks for one’s marvelous posting! I definitely enjoyed reading it, you happen to be a great author.I will ensure that I bookmark your blog and may come back later on. I want to encourage you continue your great writing, have a nice morning!|

  8. This design is incredible! You most certainly know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Wonderful job. I really loved what you had to say, and more than that, how you presented it. Too cool!|

  9. I was wondering if you ever considered changing the layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or 2 pictures. Maybe you could space it out better?|

  10. Does your blog have a contact page? I’m having trouble locating it but, I’d like to send you an email. I’ve got some ideas for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time.|

  11. I’m amazed, I have to admit. Rarely do I encounter a blog that’s both educative and entertaining, and without a doubt, you’ve hit the nail on the head. The problem is an issue that not enough people are speaking intelligently about. Now i’m very happy I found this in my search for something relating to this.|

  12. Hello! I could have sworn I’ve visited this web site before but after browsing through a few of the posts I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking it and checking back frequently!|

  13. First of all I want to say terrific blog! I had a quick question that I’d like to ask if you don’t mind.

    I was curious to know how you center yourself and clear your thoughts
    before writing. I’ve had trouble clearing my
    mind in getting my thoughts out. I do take pleasure in writing but it
    just seems like the first 10 to 15 minutes are generally wasted simply just trying to
    figure out how to begin. Any ideas or hints?
    Thank you!

  14. I have been exploring for a bit for any high quality articles or blog posts on this sort of space . Exploring in Yahoo I finally stumbled upon this site. Reading this information So i’m satisfied to exhibit that I have a very just right uncanny feeling I found out exactly what I needed. I such a lot definitely will make certain to don?t fail to remember this site and provides it a look regularly.|

  15. Somebody essentially lend a hand to make significantly posts I might state. This is the first time I frequented your web page and thus far? I amazed with the research you made to create this particular submit incredible. Wonderful process!|

  16. Awesome blog! Do you have any recommendations for aspiring writers? I’m hoping to start my own site soon but I’m a little lost on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally confused .. Any ideas? Cheers!|

  17. Howdy would you mind letting me know which webhost you’re using? I’ve loaded your blog in 3 different internet browsers and I must say this blog loads a lot quicker then most. Can you suggest a good web hosting provider at a honest price? Thank you, I appreciate it!|

  18. You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!|

  19. I like the valuable information you provide in your articles. I’ll bookmark your blog and check again here regularly. I am quite sure I will learn many new stuff right here! Best of luck for the next!|

  20. Hi there are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any html coding expertise to make your own blog? Any help would be greatly appreciated!|

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *