/ best free open source web resources /

Graphic Resources

Fully Interactive jQuery File Tree

Posted · Category: CC License, Upload

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive, valid and semantic XHTML file tree with as little as one line of JavaScript code. jQuery File Tree is fully customizeable via CSS with the ability to style icons based on file extension. It also supports custom connector scripts for extended functionality. The expand and collapse event are customizable as well. jQuery File Tree works in all browsers supported by jQuery. It has been fully tested in Internet Explorer 6 & 7, Firefox 2, Safari 3 and Opera 9.


The author has stated that the connector scripts provided with jQuery File Tree are only designed to read information from a specified root folder. Although this is typically harmless, there exists a potential for malicious individuals to be able to view your entire directory structure by spoofing the root parameter. It is highly recommended that you add some form of check to your connector script to verify the path being scanned is a path that you want to allow visitors to see.

Requirements: jQuery
Demo: http://labs.abeautifulsite.net/projects/js/jquery/fileTree/demo/
License: Creative Commons License

  • Hmmm, I wonder if this will work for remote sites so that people can view their entire directory structures?

  • Edwin

    Looks great!

    You keep on surprising me with the best stuff you can find on the internet! Thank you very much!

  • Looks great :)
    I’ve been seeing lots of Famfam icons these days.
    Thanks for finding it.

  • Chirs

    Hi Ray

    Thank you for sharing so wealthful ajax tree component. I also have see your very useful multi-select drop-down component.

    Would it be possible to combine them, I mean, having the checkboxes for selecting multiple nodes for the “ajax drop-down tree”.


  • This extension is great. It would’ve been greater if it had an “Upload” option. It has no such thing, right?

  • As a follow up to Valery, I have used this component with an upload… simply modify the connect to also return a ‘Add File’ button which can be linked to any javascript / web address to handle the uploading.

    Likewise to add deleting of files I added an image that floats on the far right of each file which one click removed the file

  • evil marco

    I would love to know how to get this to work with a UNC path for the root…

  • Harry

    I’ve added a tiny function to delete a file after clicking on a garbage icon while having the directory tree expanded. After successfully deletion of the entire file, I would like to have the file tree automatically to show the remaining files only.
    Actually I would need to click on the directory icon twice to simply close and open the tree again. Maybe you have a suggestion on how to manage it automatically after successful deletion?

  • John

    Has anyone gotten this to work so that it displays a certain folder of a website and it’s contents?

  • Eric

    Does anyone know how to hide files with certain extensions on this?

  • Domac

    Maybe someone knows, if there is a source code of the demo available?

    I do not know, how to implement the PHP Connector right. I always get a structure like this:

    – folder1
    – folder2
    – folder1
    – folder2
    – folder1
    – folder2

    …when I open “folder2” two times.
    Maybe someone could help me with this?
    Thanks in advance!

  • sd

    Hi there!
    First of all thanks for the great job of file tree view.

    I try to add file into the tree but for each file add in the tree have to be refresh and if the tree refresh it collapsed, What i would like to after refresh the tree stay expand at the node of new file just add in. Does any one have any idea how to do this? Thank you very much.


  • Praveen Sewak

    Hi there.

    The demo/download site no longer works. Does anyone have an alternate download/demo site for this. It looks very interesting, and i would like to use this in my app.

    Cheers, and thanks in advance.

  • Yes, Praveen is right, I also wanted to see the demo, but appeared on page where it says ” Uh oh, it’s embarassing”.

  • Ray Cheung

    Thank you for reporting the problem. I have just updated the link to http://abeautifulsite.net/blog/2008/03/jquery-file-tree/

  • Thanks Ray, the new link now works.

    Arkadiy – Thanks for recommending this Tree.

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons