| You can create a customized, fully-interactive file tree using jQuery File Tree plugin Written by Cory S.N. LaViska. For a demo on File Explorer click here.Here are the quick steps to implement it in your application. For advanced information please go to the plugin website where you can find the detailed description of this plugin as well as links to demo, download etc pages.
At first glance this seems to be very lengthy blog but when you start copying and pasting the code shown here into your application you will get this lengthy explanation very useful. Here is a snapshot of what we are going to achieve in few minutes. |
 |
|
|
|
-
Install jquery plugin
-
Download jQuery File Tree plugin files
-
place the unzipped folder into web-app folder
-
Decide the controller, action and gsp page
-
Create gsp page and customize it
Here is the contents of “/grails-app/views/FileBrowser/FileBrowser.gsp” file :
<html>
<head>
<title>File Explorer</title>
<script src=”${createLinkTo(dir: ‘js/jquery’, file: ‘jquery-1.3.2.js’)}” type=”text/javascript”></script>
<link rel=”stylesheet” href=”${createLinkTo(dir: ‘jqueryFileTree’, file: ‘jqueryFileTree.css’)}”>
<script src=”${createLinkTo(dir: ‘jqueryFileTree’, file: ‘jqueryFileTree.js’)}” type=”text/javascript”></script>
<script type=”text/javascript”>function YourFunctionToProcessThisFilePath(file){
alert(‘You selected : ‘+file);
}$(document).ready(function() {
$(‘#file_list’).fileTree({
root:’/', /*DESCRIPTION 1*/
script: ‘generateFileList.gsp’, /*DESCRIPTION 2*/
expandSpeed: 1000,
collapseSpeed: 1000,
multiFolder: false
}, function(file) {
YourFunctionToProcessThisFilePath(file); /* DESCRIPTION 3*/
});
});
</script>
</head>
<h1>File Explorer</h1>
<body>
<div id=”file_list”> <!– DESCRIPTION #4 –>
<%=”Empty”%>
</div>
</body>
</html>- DESCRIPTION #1: absoulute path of the folder which will be treated as root level folder in our file explorer. There exists a potential for malicious individuals to be able to view your entire directory structure by spoofing the root parameter. However you can control this from the script file described in DESCRIPTION #2.
- DESCRIPTION #2: connector file(server side script) that generates the list of files and subdirectories for the selected folder. This is a gsp file where you get the absolute path of the folder in dir attribute of params map for which the files and subfolders is to be found and output an unsorted list in the following format:
We will create this gsp page parallel to FileBrowser.gsp i.e. …/grails-app/views/FileBrowser/generateFileList.gsp in Step 6. Later we will move this logic into an action and hence no need of connector script (see step 8). - DESCRIPTION #3: this javascript function is called with absolute path to the selectd file whenever a file is clicked in the file browser page.
- DESCRIPTION #4: The id of the div tag is used in jQuery. So it must match at both places.
-
Create connector script
-
Test Your File Explorer
It’s time to test your file explorer. If everything went perfectly then you have successfully created your file explorer. Type the url of the action responsible for rendering FileBrowser.gsp.You can also experiment with various Parameters that are passed as an object to the fileTree() function in FileBrowser.gsp. List of Valid options can be found at the pluging website under ‘Configuring the File Tree’ heading.
-
Moving the connector script to an action of the controller
Here is the modified controller FileBrowserController having an action generateFileList. This contains the same code as in generateFileList with few new statements appended and obviously <% and %> has been removed.The modified lines has been shown in different color.
class FileBrowserController {
//……………
def showBrowser = {
//……………..
render( view : ‘FileBrowser’)
}
def generateFileList={
String dir = params?.dir
if (dir == null) {
return;
}
/* you can put here your own custom check with dir variable to protect from malicious request. */
if(!dir.endsWith(File.separator)){
dir+=File.separator
}File f=new File(dir)
if (f.exists()) {
List<File> files=[]f.eachFile { File file->
if(!file.hidden)
files<<file
}files.sort{File file->
file.name.toUpperCase()
}StringBuffer output=new StringBuffer(‘<ul class=”jqueryFileTree” style=”display: none;”>’)
// All dirs
files.each{File file->
if(file.directory){
output.append(“”"<li class=”directory collapsed”><a href=”#” rel=”${dir+file.name+File.separator}”>${file.name}</a></li>”"”)
}
}
// All files
files.each{File file->
if(file.file){
int dotIndex = file.name.lastIndexOf(‘.’)
String ext = dotIndex > 0 ? file.name.substring(dotIndex + 1) : “”
output.append(“”"<li class=”file ext_${ext}” id=”${dir+file.name}”><a href=”#” rel=”${dir+file.name}”>${file.name}</a></li>”"”)
}
}
output.append(“</ul>”)
OutputStream out = response.getOutputStream()
out.write (output.toString().getBytes())
out.flush()
out.close()
}
}
//…………….
} -
Making changes to FileBrowser.gsp to use generateFileList action instead of generateFileList.gsp file
Here are the modified lines of FileBrowser.gsp file (Modified lines shown in different color ) :
$(document).ready(function() {
$(‘#file_list’).fileTree({
root:’/',
script: “${createLink(action:’generateFileList’)}”, /* you can also explicitly specify the controller */
expandSpeed: 1000,
collapseSpeed: 1000,
After this change, you can test your File Explorer and if everything works perfectly, you can safely delete the file generateFileList.gsp.
-
Forwarding to an action when a file is clicked
To do so we will modify FileBrowser.gsp page to include a form and a hidden field for absolute path of the selected file.
The modified FileBrowser.gsp(with modified lines shown in different color) is now :<html>
<head>
<title>File Explorer</title>
<script src=”${createLinkTo(dir: ‘js/jquery’, file: ‘jquery-1.3.2.js’)}” type=”text/javascript”></script>
<link rel=”stylesheet” href=”${createLinkTo(dir: ‘jqueryFileTree’, file: ‘jqueryFileTree.css’)}”>
<script src=”${createLinkTo(dir: ‘jqueryFileTree’, file: ‘jqueryFileTree.js’)}” type=”text/javascript”></script>
<script type=”text/javascript”>function YourFunctionToProcessThisFilePath(file){
// alert(‘You selected : ‘+file);
document.getElementById(‘selectedFile’).value = file
document.getElementById(‘fileBrowserForm’).submit()
}$(document).ready(function() {
$(‘#file_list’).fileTree({
root:’/', /*DESCRIPTION 1*/
script: “${createLink(action:’generateFileList’)}”, //’generateFileList.gsp’,
expandSpeed: 1000,
collapseSpeed: 1000,
multiFolder: false
}, function(file) {
YourFunctionToProcessThisFilePath(file); /* DESCRIPTION 3 */
});
});
</script>
</head>
<h1>File Explorer</h1>
<body>
<div id=”file_list”> <!– DESCRIPTION #4 –>
<%=”Empty”%>
</div>
<g:form name=”fileBrowserForm” action=”processThisFile” method=”post”>
<g:hiddenField name=”selectedFile” />
</g:form>
</body>
</html>Now add an action ‘processThisFile’ or whatever you have used as forms action in FileBrowser.gsp file. Here is the modified FileBrowserController :
class FileBrowserController {
//……………
def processThisFile={
println params.selectedFile
render(params.selectedFile)
}//…………….
} -
Installing the plugin for Context Menu(Right Click)
Now we are going to add Context Menu functionality to our File Explorer. For this purpose we will be using one more plugin jQuery Context Menu Plugin Written by Cory S.N. LaViska(same author has written jQuery File Tree plugin). For advanced details go to the plugin website where you can see a demo as well as download necessary files to use this plugin. Click here to download the plugin.
After you have downloaded the zip file, unzip it and copy it in applications web-app folder as you did for jQuery File Tree Plugin in Step 3.
-
Create context menu options by Modifying FileBrowser.gsp file
create a list in FileBrowser.gsp that will be the markup for your context menu:
Actions are specified in the href attribute, preceeded by a # symbol. When selected, this is what will be passed back to the action parameter in the callback. You can add class attributes to the list items to assist with styling, but they have no functional meaning. Thus, class names do not have to correspond with actions.Let’s create a contextMenu (UL with id myFolderMenu) with four options cut, paste, rename and delete also a separator beteween paste and rename option which is displayed whenever a folder is right-clicked. When you click an option from the displayed context menu the javascript function HandleFolderContextMenu is called with parameters action and folderPath. action contains the href attribute excluding # character of the selected context menu option and folderPath contains the absolute path of the selected folder i.e. on which it was right clicked.
Similarly a contextMenu(UL with id myFileMenu) with two options Open… and Properties which is displayed whenever a file is right-clicked has been created. Like Context Menu for folders, this time HandleFileContextMenu javascript function is called with action and filePath parameters.
You can follow the similar steps as described in Step 10 to forward request to an action where it will be processed depending on the action and absolute path to the selected file or folder.
<html>
<head>
<title>File Explorer</title>
<script src=”${createLinkTo(dir: ‘js/jquery’, file: ‘jquery-1.3.2.js’)}” type=”text/javascript”></script><link rel=”stylesheet” href=”${createLinkTo(dir: ‘jqueryFileTree’, file: ‘jqueryFileTree.css’)}”>
<script src=”${createLinkTo(dir: ‘jqueryFileTree’, file: ‘jqueryFileTree.js’)}” type=”text/javascript”></script><link rel=”stylesheet” href=”${createLinkTo(dir: ‘jquery.contextMenu’, file: ‘jquery.contextMenu.css’)}”>
<script src=”${createLinkTo(dir: ‘jquery.contextMenu’, file: ‘jquery.contextMenu.js’)}” type=”text/javascript”></script><script type=”text/javascript”>
function HandleFolderContextMenu(action, folderPath){
alert(action+’\n\n Folder Path : ‘+folderPath);
}
function HandleFileContextMenu(action, filePath){
alert(action+’\n\n File Path : ‘+filePath);
}function showMenu(){
$(‘.directory>a’).contextMenu({
menu: ‘myFolderMenu’
},
function(action, el, pos) {
var folderPath=$(el).attr(‘rel’);
HandleFolderContextMenu(action, folderPath);
}
);
$(‘.file>a’).contextMenu({
menu: ‘myFileMenu’
},
function(action, el, pos) {
var filePath=$(el).attr(‘rel’);
HandleFileContextMenu(action, filePath);
}
);
}</script>
<script type=”text/javascript”>
function YourFunctionToProcessThisFilePath(file){
// alert(‘You selected : ‘+file);
document.getElementById(‘selectedFile’).value = file
document.getElementById(‘fileBrowserForm’).submit()
}$(document).ready(function() {
$(‘#file_list’).fileTree({
root:’/', /*DESCRIPTION 1*/
script: “${createLink(action:’generateFileList’)}”, //’generateFileList.gsp’,
expandSpeed: 1000,
collapseSpeed: 1000,
multiFolder: false
}, function(file) {
YourFunctionToProcessThisFilePath(file); /* DESCRIPTION 3 */
});
});
</script>
</head>
<h1>File Explorer</h1>
<body>
<div id=”file_list”> <!– DESCRIPTION #4 –>
<%=”Empty”%>
</div>
<g:form name=”fileBrowserForm” action=”processThisFile” method=”post”>
<g:hiddenField name=”selectedFile” />
</g:form>
<ul id=”myFolderMenu” class=”contextMenu”>
<li class=”copy”><a href=”#copy”>Copy</a></li>
<li class=”paste”><a href=”#paste”>Paste</a></li>
<li class=”separator rename”><a href=”#rename”>Rename</a></li>
<li class=”deleteFolder”><a href=”#deleteFolder”>Delete</a></li>
</ul>
<ul id=”myFileMenu” class=”contextMenu”>
<li class=”open”><a href=”#open”>Open…</a></li>
<li class=”properties”><a href=”#properties”>Properties</a></li>
</ul>
</body>
</html>Finally modify generateFileList action by adding a statement output.append(““) as shown below the modified lines of generateFileList action to get the changes made to FileBrowser.gsp to work. It just calls the showMenu javascript function defined in FileBrowser.gsp which in turn enables the context menu for the explored folder.
def generateFileList={
//…………………..
output.append(“</ul>”)
output.append(“<script>showMenu(); </script>”)
OutputStream out = response.getOutputStream()
out.write (output.toString().getBytes())
//…………………..
}
jQuery File Tree requires jQuery 1.2 or above.If you have already installed this plugin then you can skip this step.
To install jQuery plugin use the following command :
grails install-plugin jquery
To get the list of commands to manage plugins (eg. create, install, uninstall, list of plugins) use the following command :
grails --help | grep plugin
You can download the required files from the plugins website or Click here to download.
Unzip the downloaded zip file. The unzipped folder ‘jqueryFileTree’ contains a folder ‘connector’ that you can safely delete because we will write our own connector specific to grails.
Using operating system file explorer tool move/copy the unzipped folder ‘jqueryFileTree’ to the applications web-app folder. If you are not interested in such an easy step then you can move the jqueryFileTree.js file to web-app/js folder, jqueryFileTree.css file to web-app/css and all the files from jQueryFileTree/images to web-app/images folder and correspondingly change the reference to these files in gsp page we will be creating next. I assume you followed the easier way i.e. copied the entire folder into web-app folder.
Suppose we have a controller ‘FileBrowser’(…grails-app/controllers/FileBrowserController.groovy) and its ‘showBrowser’ action renders the view (we call it : …/grails-app/views/FileBrowser/FileBrowser.gsp). The controller looks like
class FileBrowserController {
//...............
def showBrowser = {
//.................
render( view : 'FileBrowser')
}
//................
}
Here is the code for connector script "...grails-app/views/FileBrowser/generateFileList.gsp"
<%
String dir = params?.dir
if (dir == null) {
return;
}
/* you can put here your own custom check with dir variable to protect from malicious request. */
if(!dir.endsWith(File.separator)){
dir+=File.separator
}
File f=new File(dir)
if (f.exists()) {
List<File> files=[]
f.eachFile { File file->
if(!file.hidden)
files<<file
}
files.sort{File file-> file.name.toUpperCase()}
StringBuffer output=new StringBuffer('<ul class="jqueryFileTree" style="display: none;">')
// All dirs
files.each{File file->
if(file.directory){
output.append("""<li class="directory collapsed"><a href="#" rel="${dir+file.name+File.separator}">${file.name}</a></li>""")
}
}
// All files
files.each{File file->
if(file.file){
int dotIndex = file.name.lastIndexOf('.');
String ext = dotIndex > 0 ? file.name.substring(dotIndex + 1) : "";
output.append("""<li class="file ext_${ext}"><a href="#" rel="${dir+file.name}">${file.name}</a></li>""");
}
}
output.append("</ul>");
println output.toString()
}
%>
Hope this helps you guys in creating file explorer with context menu.
Bhagwat Kumar
bhagwat@intelligrape.com
Cheers!
~~Bhagwat Kumar~~
bhagwat(at)intelligrape(dot)com
http://twitter.com/bhagwatkumar
http://in.linkedin.com/in/bhagwatkumar
Great post Jon! I have been following the #p2 effort since you started it, and although I have understood its purpose this post does a really great job solidifying the full rationale.
Hi
This is very interesting. I am trying to use this for a Menu Tree that fetches the menus from Oracle DB.
It is fetching the Menus. After that When I click on a Menu, it is repopulating the same Menus recursively.
Appreciate help.
Thanks
Hey Srini,
This is something that we missed in the blog. We had to slightly modify the jqueryFileTree.js file to get this working and avoid the recursion.
Try changing the line number 72:”showTree( $(this).parent(), escape($(this).attr(‘rel’).match( /.*\// )) );”
with this.
“showTree( $(this).parent(), escape($(this).attr(‘rel’));”
Hope this helps
Regards
Hi,
First, thank you so much, you save my day(s…) !
It works great on php too, but I have a small problem :
- only on internet explorer 6 (it just works fine on firefox)
- with simples quotes on file/folder ‘s name
If it was a encoding/escaping problem, it will don’t work on firefox, right ?
Does the problem comes from the function “YourFunctionToProcessThisFilePath(file)” which is called before “$(document).ready(function() {” ?
And, It may sound stupid, but why this function is not encapsulated in .ready function ? I try to do so, but it didn’t work.
Any idea ? Any help is very appreciate. Thanks.
Thank you very much for the step by step guide.
I faced two issues
1) If I pass the root value as “e:/”. In the controller the value was coming as “e%3A/”
2) When I clicked on any folder, the “dir” param was being passed as null.
After removing the “.match( /.*\// )” based on S Vivek Krishna inupt and after removing escape, it started sending valid values.
Any Idea?
Hey, I found this article while searching for help with JavaScript. I’ve recently changed browsers from Opera to Microsoft Internet Explorer 5. After the change I seem to have a problem with loading JavaScript. Every time I browse site that needs Javascript, my computer freezes and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is greatly appreciated! Thanks
I have created a sample application for testing this blog. I have received lot of mails regarding this. Here is the link to sample application git repo https://github.com/bhagwat/FileTreeTest
The sample application also solves the problem of % characters in dir as it uses params.dir.decodeURL() now.
Soon I will re-format this blog as this looks ugly this time.
Nice read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch as I found it for him smile Thus let me rephrase that: Thanks for lunch!
winrar gratuit…
[...]Creating File Explorer with Context Menu using jQuery File Tree Plugin « Intelligrape Groovy & Grails Blogs[...]…
Magazin online aer conditioat…
[...]Creating File Explorer with Context Menu using jQuery File Tree Plugin « Intelligrape Groovy & Grails Blogs[...]…
tips…
[...]Creating File Explorer with Context Menu using jQuery File Tree Plugin « Intelligrape Groovy & Grails Blogs[...]…
nullled script…
[...]Creating File Explorer with Context Menu using jQuery File Tree Plugin « Intelligrape Groovy & Grails Blogs[...]…
giao diện Việt – giao dien website…
[...]Creating File Explorer with Context Menu using jQuery File Tree Plugin « Intelligrape Groovy & Grails Blogs[...]…
web design…
[...]Creating File Explorer with Context Menu using jQuery File Tree Plugin « Intelligrape Groovy & Grails Blogs[...]…
The content from your site are really terrific)
I need to expand the tree node using javascript. Can some one please help me in achieving this?
I believe we should call showTree in jQueryFileTree.js. But I am not sure how to do that.
Any help is much appreciated.
Thanks.
A big Hello Friend, I am writing from Longreach, Australia. Thanks for the interesting post. It helped me a lot with my school cooking research