-
Install jquery plugin
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
-
Download jQuery File Tree plugin files
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.
-
place the unzipped folder into web-app folder
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.
-
Decide the controller, action and gsp page
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')
}
//................
}
-
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
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()
}
%>
-
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())
//…………………..
}
Hope this helps you guys in creating file explorer with context menu.
), we can access remotely hosted mysql database using jquery ajax calls. But this interaction between jquery and mysql database cannot happen directly. We will need to specify a server side script(in PHP terminology) or a controller action(in Grails Terminology) that will fetch data from the mysql database and serve it to the jquery call. Jquery will simply make a cross-domain ajax request to the server side script and the script will send requested data as response.