Ajax File Storage User Interface

Hamilton G. Chua (ham@solutiongrove.com)
January 2008
v1.0

What's New :

v1.0 Final

updated to use ExtJS 2.0
added a tools menu as an alternative to the file context menu
fixed the url link to download archives
support for dotlrn fs-portlet
properties popup with ability to view and upload revisions
built in support for sharing folders across file storage instances (turned off by default, file storage must support symlink feature c/o Dave Bauer)
tooltips on file panel

v1.0 Beta

rewritten to use ExtJS 2.0rc1
autocomplete when adding/editing tags
accordion layout for left region
use famfam silk icons from http://www.famfamfam.com/lab/icons/silk/

v0.81d

context menu adds links to file properties and permissions
support for tagging files
tagcloud panel
download archive button on toolbar to download the entire file storage contents
download archive menu item in folder context menu to download an archive of a folder

v0.8d

can be used on all file storage instances by following setup instructions below
degrades gracefully to old file storage interface if javascript is off
context menu via right click on the right panel
drag and drop moving of files and folders on the right panel to the tree panel
flash based upload component care of swfupload
toolbar menu
support for internationalization thru acs-lang
support for SHIFT and CTRL to select multiple files on the right panel

Set Up

Install ajax-filestorage-ui thru acs-admin/install.

Before you can use ajaxfs-ui with your file storage instance, you need to make a few modifications to file-storage/www/index.adp. The code for index.adp is shown below and the changes that you must add are in red .


<master>
<property name="title">@folder_name@</property>
<property name="header">@folder_name@</property>
<property name="context">@context;noquote@</property>
<property name="displayed_object_id">@folder_id;noquote@</property>

<include src="/packages/ajax-filestorage-ui/lib/ajaxfs-include" package_id="@package_id@" folder_id="@folder_id@" layoutdiv="fscontainer">

<div id="fscontainer">
<table>
<tr>
<td>
<if @up_url@ not nil>
    <a href="@up_url@" class="button">#file-storage.index_page_navigate_up_folder#</a>
</if>
</td>
<td>
<if @project_url@ not nil>
	<a href="@project_url@">#file-storage.back_to_project#: @project_name@</a>
</if>
</td>
</tr>
</table>
<include src="folder-chunk" folder_id="@folder_id@"
    n_past_days="@n_past_days@" allow_bulk_actions="1" return_url="@return_url@">
</div>

<div style="clear:both"></div>
<p>@notification_chunk;noquote@</p>

These modifications are ideal if you want all your file storage instances to use AjaxFs. If you want more control on which file storage instance on your system uses AjaxFS, see below.

Using a File Storage parameter

If you would like the ability to turn Ajaxfs on or off for different instances of file storage on your system. You can create a parameter UseAjaxFs in the file storage package.

In your OpenACS system, go to /acs-admin/apm
Click on the link to the File Storage package
Click the Parameter link
Click Add a new parameter
Enter the following information

Parameter Name : UseAjaxFs
Description : Set this parameter to 1 if you want file storage to use the ajaxfs-ui interface
Type: number
Default: 0
Click Add Parameter

Then, make the following modifications in red to the index.tcl file in packages/file-storage/www.


set use_ajaxfs_p [parameter::get -parameter UseAjaxFs -default 1]
ad_return_template

On the index.adp file, make the following changes


<master>
<property name="title">@folder_name@</property>
<property name="header">@folder_name@</property>
<property name="context">@context;noquote@</property>
<property name="displayed_object_id">@folder_id;noquote@</property>


<if @use_ajax_fs_p@ eq 1 >
<include src="/packages/ajax-filestorage-ui/lib/ajaxfs-include" package_id="@package_id@" folder_id="@folder_id@" layoutdiv="fscontainer">
</if>


<div id="fscontainer">
<table>
<tr>
<td>
<if @up_url@ not nil>
    <a href="@up_url@" class="button">#file-storage.index_page_navigate_up_folder#</a>
</if>
</td>
<td>
<if @project_url@ not nil>
  <a href="@project_url@">#file-storage.back_to_project#: @project_name@</a>
</if>
</td>
</tr>
</table>
<include src="folder-chunk" folder_id="@folder_id@"
    n_past_days="@n_past_days@" allow_bulk_actions="1" return_url="@return_url@">
</div>

<div style="clear:both"></div>
<p>@notification_chunk;noquote@</p>

Embed in dotLRN Portlets

To embed ajaxfs in the dotlrn fs-portlet, you will need to make the following modifications to fs-portlet

packages/fs-portlet/www/fs-portlet.tcl


if {![empty_string_p $user_root_folder] && [lsearch -exact $list_of_folder_ids $user_root_folder] != -1} {
    set folder_id $user_root_folder
    set user_root_folder_present_p 1
    set use_ajaxfs_p 0
} else {
    set folder_id [lindex $list_of_folder_ids 0]
    set file_storage_node_id [site_node::get_node_id_from_object_id \
                             -object_id [ad_conn package_id]]
    set file_storage_package_id [site_node::get_children \
                                -package_key file-storage \
                                -node_id $file_storage_node_id \
                                -element package_id]
    set use_ajaxfs_p [parameter::get -package_id $file_storage_package_id -parameter UseAjaxFs -default 0]

}

packages/fs-portlet/www/fs-portlet.adp


<if @config.shaded_p@ false>
<if @use_ajaxfs_p@ eq 1>
<include src="/packages/ajax-filestorage-ui/lib/ajaxfs-include" package_id="@file_storage_package_id@" folder_id="@folder_id@" layoutdiv="fscontainer">
</if>


<div id="fscontainer">
<if @scoped_p@ eq 1>
<include src=@scope_fs_url@ folder_id=@folder_id@ root_folder_id=@folder_id@ viewing_user_id=@user_id@ n_past_days=@n_past_days@ fs_url="@url@" page_num="@p
age_num@">
</if>

<else>

<if @write_p@ true>
        <div class="list-button-bar-top">
                <a href="@url@folder-create?parent_id=@folder_id@" class="button" title="#fs-portlet.create_new_folder#">#fs-portlet.create_new_folder#</a>
                <a href="@url@file-add?folder_id=@folder_id@" class="button" title="#fs-portlet.upload_file#">#fs-portlet.upload_file#</a>
                <a href="@url@simple-add?folder_id=@folder_id@" class="button" title="#fs-portlet.create_url#">#fs-portlet.create_url#</a>
        </div>

</if>
  <listtemplate name="folders"></listtemplate>
</else>
</if>
<else>
<small>
    #new-portal.when_portlet_shaded#
  </small>
</else>
</div>

<p>@notification_chunk;noquote@</p>

Notes

If you are using the UseAjaxFs parameter :

you can set default value to 1 so that all newly created File Storage instances will use AjaxFs by default.
you can update the UseAjaxFs parameter of your existing file storage instances using the query below, turning AjaxFS on (1) or off (0) in one sql statement


update apm_parameter_values set attr_value=1 where parameter_id=(select * from apm_parameters where parameter_name='UseAjaxFs')