Getting Started with IT Hit AJAX File Browser v2.0 and Earlier

Download the tar.gz archive here and unpack it. The AJAX File Browser is fully functional and does not have any limitations. However, the trial period is limited to 1 month. After the trial period expires the AJAX File Browser will stop working.

Adding AJAX File Browser on a Web Page

To add IT Hit AJAX File Browser on a web page follow this steps:

1. Add <script> tag referencing ITHitAJAXFileBrowser.js to your web page:

   <script src="ITHitAJAXFileBrowser.js" type="text/javascript"></script> 

2. Add theme CSS to your web page. Optionally you can specify toolbar buttons style and size:

   <style type="text/css">
   @import "themes/clean/include.css";
   @import "themes/clean/icons_32.css";
   </style>

3. Add a tag with the ID that will contain AJAX File Browser and apply ih_style CSS class to this tag. Note that all themes provided with Ajax File Browser are using the same CSS class - ih_style:

   <div id="AjaxFileBrowserContainer" class="ih_style" style="width: 100%; height: 100%"></div>

4. Create the AJAX File Browser Settings object:

   var settings = {
       
       // (required) ID of the HTML control in which Ajax File Browser will be created
       Id: 'AjaxFileBrowserContainer',
       
       // (required) the root folder to be displayed in Ajax File browser
       Url: 'http://webdavserver.com/dav/',
       
       // (required) always provide size of the control
       Style: 'height: 500px; width: 700px',
       
       // path to the folder where file icons are located
       FileIconsPath: '/browser/icons/',
       
       // path to MS Office templates, always specify the full path
       MsOfficeTemplatesPath: 'http://webdavserver.com/dav/templates/',
       
       // folder to be selected, same as SetSelectedFolder call
       SelectedFolder: 'http://webdavserver.com/dav/Sales/',
       
       // path to Java applet that opens documents directly from the server
       PluginsPath: '/browser/plugins/'
   };

   Using Settings object you can customize the AJAX File Browser appearance. The full description of this object could be found here. At a minimum in this object, you must specify the parent object ID, WebDAV server URL and the size of the control. Usually, you will also specify icons path, selectedfolder,path to Microsoft Office templates and Java applet folder path. Here are descriptions for each property:

   Id - HTML object or tag ID in which AJAX File Browser will be created.

   Url - WebDAV server URL. It will be displayed as a root node in AJAX File Browser.

   Important! According to HTML 5 standard, if your WebDAV server is located on a different domain or on a different port the server must attach the Access-Control-Allow headers to server responses. Find more details here.

   Style - HTML style. At a minimum, you must provide the size of the control here.

   Important! If your page runs in XHTML mode and you set height of the control to 100% all parent controls including HTML and BODY tags must be set to 100%:
   <style type="text/css"> html, body { height: 100%;} </style>

   FileIconsPath - path to the folder where file icons are located. By default AJAX File Browser searches for file icons in 'icons/' folder.

   SelectedFolder - specifies node to be selected in a tree. If this property is specified, the AJAX File Browser will load files and folders list in Files Panel and will automatically expand necessary tree nodes if required.

   MsOfficeTemplatesPath - path to the folder where Microsoft Office templates are located. You must always specify full URL with the domain. To verify that your server meets all Microsoft Office requirements read this article. This property is required only if you run AJAX File Browser in IE and want to create Microsoft Office Word, Excel and PowerPoint documents.

   PluginsPath - path to the folder where Java applet for opening documents directly from the server is located. By default AJAX File Browser searches for the applet in 'plugins/' folder.

5. Create the control, passing Settings object as a parameter:

   var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings); 

Here is how your HTML code will finally look like:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>IT Hit AJAX File Browser</title>

<style type='text/css'>
@import '/browser/themes/clean/include.css';
@import '/browser/themes/clean/icons_32.css';
html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
</style>

<script src='/browser/ITHitAJAXFileBrowser.js' type='text/javascript'></script>

<script type='text/javascript'>
function InitAjaxFileBrowser() {
    var webDavServerPath = 'http://webdavserver.com/dav/';

 
    var settings = {
        Id: 'AjaxFileBrowserContainer',
        Url: webDavServerPath,

        Style: 'height: 100%; width: 100%',
        FileIconsPath: '/browser/icons/',
        MsOfficeTemplatesPath: webDavServerPath + 'templates/',

        SelectedFolder: webDavServerPath,

        PluginsPath: '/browser/plugins/'
    };


    var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);
}
</script>

</head>
<body onload='InitAjaxFileBrowser();'>
<div id='AjaxFileBrowserContainer' class='ih_style' style='width: 100%; height: 100%'></div>
</body>
</html>

Selecting Folder Node in a Tree

To programmatically set the selected node in a tree after the control is created use the SetSelectedFolder method:

ajaxFileBrowser.SetSelectedFolder('http://webdavserver.com/folder/');

This will load files and folders list in the right part of the control and automatically expand necessary tree nodes if required. This call is identical to setting SelectedFolder property of AJAX File Browser Settings objects while creating the control.

To get a selected tree node use GetSelectedFolder method. It will return HierarchyItem JavaScript object:

var item = ajaxFileBrowser.GetSelectedFolder(); 
alert(item.Href);

Getting and Setting List of Selected Files and Folders

You can use the AJAX File Browser control for creating File Open / Select dialogs. To get a list of selected items use GetSelectedItems method. It will return an array of HierarchyItem JavaScript objects:

var selectedItemUrls = '';
var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
for(var i=0; i<aSelectedHierarchyItems.length; i++){
    selectedItemUrls += aSelectedHierarchyItems[i].Href + ' ';
}

To set selected item in a control use SetSelectedItems method. In this method, you must pass either array of URLs or array of HierarchyItem objects:

var aSelectedItems = new Array();
aSelectedItems[0] = 'http://webdavserver.com/folder/file.doc';
aSelectedItems[1] = 'http://webdavserver.com/folder/install.exe';
aSelectedItems[2] = 'http://webdavserver.com/folder/';
ajaxFileBrowser.SetSelectedItems(aSelectedItems);

The tree will expand to show content of the necessary folder if required. Note that all items must be located in the same folder. All items located in the folder other than the first item will be ignored. 

Selection Events

When user selects the- folder in a tree the OnSelectedFolderChanged event is fired. When selected items change the OnSelectedItemsChanged event is fired:

ITHit.Events.AddListener(ajaxFileBrowser, 'OnSelectedFolderChanged', onSelectedFolderChanged);

ITHit.Events.AddListener(ajaxFileBrowser, 'OnSelectedItemsChanged', onSelectedItemsChanged);

...

function onSelectedItemsChanged() {
    var selectedItemsInput = document.getElementById('SelectedItems');
    selectedItemsInput.value = "";
    var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
    for (var i = 0; i < aSelectedHierarchyItems.length; i++) {
        selectedItemsInput.value += aSelectedHierarchyItems[i].Href + '\n';
    }
}

function onSelectedFolderChanged() {
    alert(ajaxFileBrowser.GetSelectedFolder().Href);
}

AJAX File Browser Control Events Demo

OnOpenItem Event

By default, when user double clicks on a file or folder or presses 'Enter' the file is opened by the web browser. You can customize this behavior hooking to OnOpenItem event:

ITHit.Events.AddListener(ajaxFileBrowser, 'OnOpenItem', onOpenItem);
...

function onOpenItem(oHierarchyItem) {
    if (oHierarchyItem.ResourceType  != ITHit.WebDAV.Client.ResourceType.Folder) {
     return false;
  }
}

The AJAX File Browser passes the HierarchyItem which is being opened. This could be a file or a folder. In this event handler you can suppress the default behavior returning false as a return value.

Using the IT Hit WebDAV Ajax Library from Ajax File Browser

In case you need to access your WebDAV server programmatically you can use the IT Hit WebDAV Ajax Library, which is part of Ajax File Browser and built on top of it.

You can access the core component of WebDAV Ajax Library, the WebDavSession object, using the following call:

var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(...);
var session = ajaxFileBrowser.GetSession();

You can find more about how to use the WebDAV Ajax Library API here.

The WebDAV Ajax Library class reference could be found here: http://ajax.webdavsystem.com/