While looking at various tools that might aid in the development of an ASP.NET based file manager, I came across a JQuery based tool called jQuery File Tree. Typically we would think of a file browser for a web-server that would be something that’s almost uniquely server-side, but jQuery File Tree does a nice job at putting a front-end on what otherwise would be a plain-jane FTP or HTTP file directory.
You can view an online demo how it works here.
Here’s how to make your very own JQuery File Browser/Viewer with JQuery File Tree:
Getting Started:
First, you’ll need to download the latest version of JQuery File Browser. As of the time this article was written, the software is sitting at version 1.01 and can be downloaded here. You’ll also need a copy of JQuery it self (version 1.2+) and if you would like some of the smoother transitions, you’ll want a copy of the JQuery Easing Plugin.
Adding Script References:
After getting copies of all of the files you need, you’ll want to open up your favorite HTML editor and create a new page. We’ll need to add references to the three scripts we’re making use of (JQuery, JQuery Easing and JQuery File Tree). You’ll also want to add a reference to the stylesheet for the file browser. Your <HEAD> should end up looking something like this:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqueryFileTree.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jqueryFileTree.css" media="screen" />
Adding a Place Holder:
The next thing we’ll need to do is put a DIV inside the <BODY> tag and give it an ID to reference by JQuery later and a class for CSS styling purposes. It should look something like this:
<div id="JQueryFTD_Demo" class="JQueryFTD"></div>
Loading the File Browser:
Now that we have all of the “helper” components in place, we’ll need to call the function from the $(document).ready that is frequently used with JQuery.First, we’ll need to create our $(document).ready function which will sit in the <HEAD>
<script type="text/javascript">
$(document).ready( function() {
});
</script>
Now, inside of our $(document).ready function, we can call the JQuery File Tree function:
$('#JQueryFTD_Demo').fileTree({
root: '/windows/',
script: 'jqueryFileTree.aspx',
expandSpeed: 1000,
collapseSpeed: 1000,
multiFolder: true
}, function(file) {
alert(file);
});
There are several things to be aware of about the code above that you’ll need to know to successfully implement it. First, You’ll want to make sure that the ID of the DIV in your JQuery function matches that of the one on on the page. You should also note that the script is very picky about what you put in for the root directory. Make sure that the path is relative to the root on your hard-drive, not relative to the file it self. For example, when running the script on my local machine, I used /windows/ to display the files in my windows directory. You can also change the speed that a folder expands by modifying the “expandSpeed” and “collapseSpeed” fields. Finally, if you want to be able to open only one file at a time, you’ll want to set “multiFolder” to false.
Another important aspect of the function is reference the appropriate server-side script. You’ll need this to generate the list of files on the web-server. I happened to use the ASP.NET version, but there are versions available for Java, Cold Fusion, PHP, Ruby, etc. All of them come with the standard JQueryFileTreePackage, just make sure to point it at the right file for language you’re using.
As the script is initially, using “alert(file);” will only display the name of the file in a popup. To make this useful, we’ll probably want to change that function out for one that will open the file it self. To do that, we could simply change “alert(file);” to “window.location = file;” You might have to write a function to parse the filename that it passes and make some adjustments so it redirects to the right file on the server, but it will work.
Styling the Browser
As we’re sitting right now, our file browser will fill up the entire page. I’m going to add some basic CSS to it to make it more manageable. To do this, simply add a CSS section in your header:
<style type="text/css" media="screen">
.demo
{
width: 300px;
height: 400px;
border-top: solid 1px #BBB;
border-left: solid 1px #BBB;
border-bottom: solid 1px #FFF;
border-right: solid 1px #FFF;
background: #FFF;
overflow: scroll;
padding: 5px;
}
</style>
Completion:
At this point, the script should be working if all is well with your code and you should end up with something like this:
