How to Create a JQuery File Browser with JQuery File Tree

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:

jqfile

Feel free to download my example code (49.5 KB)

Comments

  1. Thanks,
    Great job.

  2. Nice tutorial, just feel like I’m browsing right in my on windows explorer.

  3. thnx for this tut

  4. Justin Riggs says:

    This is a fantastic tool. I’m having one issue, though, and was wondering if anyone else has seen it. If I try to set my root directory to any folder that has a space in it (“Documents and Settings” or “Program Files”) the .aspx file throws an exception stating “Could not find part of the path ‘C:\Documents%20and%20Settings’.”

    Any ideas on what’s happening here, and how I can fix it?

    Thanks,

    Justin

  5. Thx Matthew for this tutorial. Does anyone knows how to open the shown files in a *new* window?
    Trying
    window.location = file;
    opens the file in same window. And
    window.open = file;
    doesn’t work. Any idea?

  6. very nice,
    but I need to translate the PHP connector for using FTP instead of file system, anyone can help me ?

  7. Can anyone help me try to openFile function so that when I click a file in the tree it either opens in the browser or downloads? Thanks.

    Adreck

  8. valajbeg says:

    Is it possible to make connector script work on another server and be able to browse files from another server?

  9. DO you know if jquery file browser will work over a mapped drive?

  10. Hi

    I will use jquery FileTree with linux. But when i set the root: to my home variable i become the following exeption:

    # # jQuery File Tree Ruby Connector # # Version 1.01 # # Erik Lax # http://datahack.se # 13 July 2008 # # History # # 1.01 Initial Release # # Output a list of files for jQuery File Tree # # #root = “/absolute/path/” # or root = File.expand_path(“.”) # # require “cgi” cgi = CGI.new cgi.header(“type” => “text/html”) dir = cgi.params[“dir”].to_s puts ”

    * ” begin path = root + “/” + dir # chdir() to user requested dir (root + “/” + dir) Dir.chdir(File.expand_path(path).untaint); # check that our base path still begins with root path if Dir.pwd[0,root.length] == root then #loop through all directories Dir.glob(“*”) { |x| if not File.directory?(x.untaint) then next end puts “#{x}
    * “; } #loop through all files Dir.glob(“*”) { |x| if not File.file?(x.untaint) then next end ext = File.extname(x)[1..-1] puts “#{x}
    ” } else #only happens when someone tries to go outside your root directory… puts “You are way out of your league” end rescue puts “Internal Error” end puts ”

    ” #

    I use Firefox5 is this the problem? Or what can i do that this program will be run?

    Itś very important?

    Have anybody an idear?

    Thanks

  11. @Justin Riggs: November 30, 2009 at 11:32 am

    I came across this using the ASP connector, the issue I had was that if the folder had a space in it, somewhere along the line the space in the folder name was being converted to it’s HTML equivalent (%20). The vbscript for the filesystem object couldn’t therefore find the folder name.

    The fix for me was to replace the %20 with a space:
    BaseFile = replace(BaseFile, “%20″, ” “)

    No doubt this is too late for you but it might help someone else….

  12. So if You are using php server
    Add to ‘jqueryFileTree.php’ file
    this line:
    $root = $_SERVER[‘DOCUMENT_ROOT’];

  13. AndreKusuma says:

    Hi Mat, great tool, could you please reupload the page for download or the demo?

    It seems the site has been removed. Thanks

    Andre

  14. Atlanta_Joe says:

    Can someone please post something on having the file opened in a new window when one clicks on the link.

  15. Leandro Pedrosa says:

    How do I read a directory server php?
    Thanks

  16. Cristiano Paluffi says:

    Hi Guys,
    I found the spaces problem using ASP Connector, you could try to replace the line

    showTree( $(this).parent(), escape($(this).attr(‘rel’).match( /.*\// )) );

    with

    showTree( $(this).parent(), decodeURIComponent($(this).attr(‘rel’).match( /.*\// )) );

    in jqueryFileTree.js.

    Please let me know if it work for you.
    Bye.
    Cristiano

  17. Cristiano Paluffi says:

    I am sorry, I forgot also this line in the same file:

    Replace:
    showTree( $(this), escape(o.root) );

    with:
    showTree( $(this), decodeURIComponent(o.root) );

    Bye.

    Cristiano

Speak Your Mind

*