Getting Started with IT Hit AJAX File Browser

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.

The most simple way to test the control is to run it together with NtfsStorage sample provided with IT Hit WebDAV Server Engine. Configure the NtfsStorage sample on site root as described here. Than copy content of \ITHitAJAXFileBrowser_x_x_x_x\Browser folder under the \ITHitWebDAVServerEngine_x_x_x_x\Samples\NtfsStorage\Storage folder. Finally type http://localhost:xxxx/index.html in a browser.

Adding AJAX File Browser on a Web Page


<!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/default_inc.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/';
 
    //Create control
    var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller('AjaxFileBrowserContainer', webDavServerPath, 'height: 100%; width: 100%');
 
    //Set path to file icons
    ajaxFileBrowser.SetFileIconsPath('/browser/icons/');
    
    //Set path to MS Office templates
    ajaxFileBrowser.SetMsOfficeTemplatesPath(webDavServerPath + 'browser/templates/');
}
</script>

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

Selecting Folder Node in a Tree

Usually after creating the control you will select node in a tree. Use SetSelectedFolder method for this purposes:

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.

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 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 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);
}