File browser for Ruby on Rails

4
Jun31

I have spent all day yesterday looking for a good(any) Ruby on Rails file explorer or browser for a web application but did not find anything. Few people mentioned Boxroom which looks great except … it is an entire web application.

Then I bumped to jQuery File Tree.

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

It has a Ruby connector but not a Rails one, so I decided to write a connector that I can use with Rails 2.3.

I will show you in very easy steps how to setup this up.

Download the source code.

Download a demo.

Assuming you have your Rails app created and ready. Open the source zip file and copy both ‘app’ and ‘public’ folders into your application’s root.

Next, in the head tag of your layout, add the javascript libraries needed and the jQuery File Tree CSS file.

<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/jquery.easing.js"></script>
<script type="text/javascript" src="javascripts/jqueryFileTree.js"></script>
<link rel="stylesheet" href="stylesheets/jqueryFileTree.css" type="text/css"/>

Right under that add this style for the page:

<style type="text/css">
    body {
        background-color:#EEEEEE;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        font-size:11px;
        padding:15px;
    }
    .demo{
        background-color:#FFFFFF;
        border-color:#BBBBBB #FFFFFF #FFFFFF #BBBBBB;
        border-style:solid;
        border-width:1px;
        height:400px;
        overflow:scroll;
        padding:5px;
        width:200px;
    }
</style>

In the body tag, create the div that will carry the File Tree explorer.

38
39

<h2>jQuery File Tree for Ruby on Rails</h2>
<div id="fileTree" class="demo"></div>

Now to create our fileTree using jQuery, we add this script in the head tag:

<script type="text/javascript">
    $(document).ready( function() {
        $('#fileTree').fileTree({ root: '', script: 'jqueryfiletree/content' }, function(file) {
            alert(file);
        });
    });
</script>

@ line 31, you will notice we passed root and script variables to the fileTree method.

root = the folder you wish to browse, in this case it is an empty string, to point to our public folder. If you wish to point to the images folder, then you type root:”images/”

script= controller/method

Now open config/routes.rb and add this line:
2
map.resources :jqueryfiletree
DONE! Run the server and you will see the File Tree browser.

Note: If you are getting a blank window without seeing the filetree, make sure your database is accessible and that you don’t have any exceptions being thrown by the server in your console!

Found this useful?

Why not subscribe to my RSS feed!

Filed under: Ruby on Rails

31 Comments

// 31 Comments

Bachir El Khoury
11:14 am on June 7th, 2009
Links have been updated.
Thanks Rob for reporting this!
helmerj
12:22 pm on June 18th, 2009
Thanks for these instructions. Unfortunately I cannot get it to work. I follow the instructions but all I get is an empty window without any directories and files. All js files and css files are successfully loaded though…

You write that you wrote this for rails 2.3 how would I adapt the files to work with rails 2.2?

Another question is how do I enable file opening/downloading? I tried to simply change the

alert(file);

to

open(file);

and it tries to open the file but fails with a routing problem:

ActionController::RoutingError (No route matches “/public/robots.txt” with {:method=>:get}):

Thanks in advance for hints.
J.
helmerj
12:35 pm on June 18th, 2009
Hi looking at the log file it boils down to this error I suppose:

Processing ApplicationController#index (for 127.0.0.1 at 2009-06-18 14:31:21) [POST]
Session ID: 290648773fa52f64f328c8bd548c789d
Parameters: {”dir”=>”public/data”}

ActionController::MethodNotAllowed (Only get, put, and delete requests are allowed.):

Any ideas?

Cheers J.
Bachir El Khoury
2:47 pm on June 18th, 2009
Hi J,
I have updated both source code and demo to fix this issue.

This is happening because of a scope issue, since the index page is in “public” folder and we are trying to call “public/robot.txt” so the url looks like
http://localhost:3000/public/robots.txt

Although the code sorts out this issue and you will be able to view the image or files in the browser, they will not be downloaded.

I am expending on this explorer, to include:
- force download
- list view
- thumbnail view
- File filtering

Stay tuned, I will be posting the much more advanced explorer really soon.
if you have any suggestions for extra features, let me know and I can add those in the next update.

cheers,
Bach
Tyler
8:54 pm on July 12th, 2009
This connector seems awesome, but I cannot get it to work for the life of me. It just displays an empty box. Do you have any tips or hints that could help me get it working?
Rufor
9:05 am on July 14th, 2009
Hello,
Interesting, I`ll quote it on my site later.
Bachir El Khoury
12:59 pm on July 14th, 2009
Tyler,
try to see if :
1. the javascript is pointing to the right folder
2. the javascript .ready function is firing.

Try to add an alert right after
$(document).ready( function() {
alert(”yup I am ready”);

3. If you are still having this issue, send me a sample app and i will check it out and fix it for you.
CK
12:17 am on July 29th, 2009
AWESOME connector. It solved one of my biggest problems, cannot thank you enough!!!!
I have been looking for a file browser for rails it’s been ages, can’t believe it’s the only one I found.
Well done for posting this, works great
tim
2:58 am on August 29th, 2009
Is there anyway to get “out” of the public folder?

Thanks in advance.
Bachir El Khoury
1:46 am on August 30th, 2009
Hey tim, sure you can.

If you open file app/controllers/jqueryfiletree_controller.rb

At line 5, you will see the fileTree is pointed at the public folder, you can change that to any folder you wish to point at.

Let me know if you need any help with that.
TB
4:02 pm on September 16th, 2009
Cool stuff!

I got it to work in minutes - but trying to name my files with german umlauts, the “No route matches” Error ocurred.

The charset is set to UTF-8 - so what can I do in order to let it work with the german Umlauts (for example one filename is ‘übersicht.pdf’ ?

Thanks in advance.
Bachir El Khoury
1:25 pm on September 19th, 2009
Hi TB,

Try the below and let me know if that works.
Create a file called test.rb anywhere on your drive.

add this code in it:
require ‘iconv’

Dir.entries(”./”).each do |file|
if Wx::PLATFORM == ‘WXMSW’
file = Iconv.conv(’CP1252′,’UTF-8′, file)
end
puts file
end

then either double click the file to run it, or call the file through command line.
It will output all file names in that same directory.

try to put few files with umlauts in their names and see what it outputs.

Let me know how you go, this seems to be one of many encoding issues on different platforms.
Rogerio Ferreira
9:22 pm on December 7th, 2009
There is some way to use drag and drop in Jquery File Tree?
Bachir El Khoury
8:56 am on December 29th, 2009
There is some way to use drag and drop in Jquery File Tree?

Not as far as i last checked. But you can easily expand on it to include the functionality.
Harm
9:18 pm on January 11th, 2010
Excellent! I was beginning to wonder why it was so hard to find anything.
Rogerio Ferreira
12:16 pm on January 19th, 2010
I think someone has implemented drag and drop:

http://plugins.jquery.com/project/filetree
Sebastian
7:34 pm on May 19th, 2010
I just wrestled the drag and drop capale version and as it nearly made me mad, i wanna share my experience:

The script for the ajax request has to return json and you can set an error status, e.g.

{’error’: 1, ‘html’: ‘invalid response’}

sofa so good.

What really gave me a headache was that for successful request, you are not allowed to put line breaks in your response. As i did not manage to create the output from a view i now render everything as text. It looks somewhat ugly but it works. I modified the controller method to look somewhat like the following

the_text = ‘{”error”: 0, “html”: \”+”+
@dir[0].map{|dir| ‘‘ + dir + ‘‘}.join() +
@dir[1].map{|file| ‘‘ + file + ‘‘}.join() +
‘\’}’
render :text => the_text.gsub(”\n”, “”).gsub(” “, ” “)

Of course a less naive implementation would set the error flag in a more meaningful way
Sebastian
7:35 pm on May 19th, 2010
Nah, that did not come out as i wanted… Can you correct my formatting, please?
leigh
5:36 am on June 10th, 2010
Can you provide code on top of this awesome demo to open PDF files in the file tree browser? Thanks.
Benchips
12:46 pm on June 16th, 2010
Hi!
This is really good stuff, thank you!
However I can’t seem to make it work, like many others I just get an empty box.
I tried to add the code you gave last year to Tyler, to see if the function .ready works, and I don’t get any message.
Could you help me?
Benchips
12:50 pm on June 16th, 2010
Oh and I just try with your demo file, it still doesn’t work…
David
12:30 pm on August 13th, 2010
it’s work fine, but it isn’t compatible with jquery 1.4.2.
Any idea fo resolve this ?
Joel
1:09 pm on September 11th, 2010
Hi, this is helpful thanks, couple of things for me that were problems:

- had to change stylesheet and js references to have “/” at begining
- had to change $(’#fileTree’).fileTree({ root: ”, script: ‘jqueryfiletree/content’ }, function(file) {
to
$(’#fileTree’).fileTree({ root: ”, script: ‘/jqueryfiletree/content’ }, function(file) {
reniak
6:53 pm on December 27th, 2010
Hi, it’s so good for me. but there were several problems for me. It’s fixed now.

Symptoms very similar with above

It worked well by ["http://localhost" or "http://localhost/controller"]
but didn’t worked by ["http://localhost/controller/" or "http://localhost/controller/action"]

I think it’s required to insert ‘/’ at begining of path of stylesheet or script
otherwise, server interprets “jqueryfiletree/content” as “controller”. So it doesn’t work.
mridge50
4:06 pm on April 5th, 2011
I’m getting this error using jquery 1.4.2 using the examples above.
ActionController::RoutingError (No route matches “/jqueryfiletree/content”):
any ideas?
mridge50
4:08 pm on April 5th, 2011
oh yeah, I also get the empty box problem which I believe is caused by the above error.
Bachir El Khoury
3:08 pm on April 24th, 2011
Hey guys, I have updated the source & demo to resolve the path issues.
@mridge50 and everyone having the empty box issue, please make sure you database is accessible and that your are not getting any exceptions or errors in the console.

@mridge50 please try to run the demo and see if that works with the included jQuery version.
Javier
8:51 pm on May 19th, 2011
Hi, I have a webapp with rails, and now I need brows a directory with videos. I try to use the jqueryfiletree but the link doesn’t work. Somebody can help me to find a manual o instructions to install the jqueryfiletree plug in and use the connector developed in this page? Thanks. I have rails 3.0.5
Bachir El Khoury
2:38 am on May 20th, 2011
thanks @Javier for reporting the “jQuery File Tree” broken link. I have updated the link and there you should find detailed instructions about the script with links to demos etc… then you can come back here and follow the steps. I haven’t tested it with Rails 3 though, so I can’t guarantee it will work.
rox
6:00 am on December 30th, 2011
Did not work with rails 3 .. hope to get sooner update to work with rails 3 and above.
Bachir El Khoury
9:18 pm on January 16th, 2012
@rox it’s been a really long time since I have worked with ROR. If you managed to get it working with rails 3 feel free to share your experience and I can update the code. Thx