jQuery.formTree by Chris Gunther

Introduction

I needed the ability to select a file that already existed on the server to associate with a record in the database. The typical HTML "file" input type only allows the user to browse files on their local computer for uploading, not select an existing file on the server, so I created this plugin.

How to Use

  1. Include jQuery and the formTree plugin scripts.
  2. Specify the DOM elements to turn into a form tree as such: $('input').formTree('index.php'); index.php representing the path to the file that will return the unordered list.

Options

Name Default Value Description
directory default An alias to represent which directory on the server should be parsed. On the server side, this alias should be mapped to a path.
selectedClass selected This is the class applied to a file when it is chosen. When using the form tree to edit a value, it is expected that the existing file in the unordered list will have this class applied to it so the tree will be expanded on load to make this file visible.
onReady none This is a function that is called when the form tree is ready to be used. It is passed the jQuery object representing the newly inserted form tree. Work's great with Ariel Flesler's ScrollTo plugin to make the selected file visible on load, instead of needing to be scrolled to.

Examples

Default Options / No Styling
Default Options / Basic Styling*

* The basic styling applied here works in all browsers except IE6. Some work could be done to get it inline with the rest of the pack.

Compatibility

Tested on: Chrome, Safari 3+, Firefox 2+, Opera 10, IE 6+

jQuery: v1.3.2, v1.4

If Javascript is disabled, it remains a text input field, allowing the user to manually type the path to the file.

Download

Changelog

Issues/Feature Requests

If you have an issue, please use the Issues feature at GitHub to report it. Found a bug or want to add a feature? Fork the project over on GitHub, make your changes and send me a pull request.