File browser for Ruby on Rails

4
Jun16

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.

Enjoy this article?

Consider subscribing to our RSS feed!

Filed under: Ruby on Rails

16 Comments

// 16 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