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.

Adding AJAX File Browser on a Web Page

The steps below are valid for Ajax File Browser v2.1 and later. For earlier versions please refer to this page. Please also see this step-by-step guide about how to upgrade your initialization code from previous versions.

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

  1. Add <script> tag referencing ITHitAJAXFileBrowserLoader.js on your web page:
    <script src="/ITHitAJAXFileBrowserLoader.js" type="text/javascript"></script> 
  2. Add HTML tag with 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>
  3. Create the AJAX File Browser Settings object:
    var settings = {    

        // (required) path to ajax file browser files (this folder contains ITHitAJAXFileBrowserLoader.js)
        BasePath: '/',

        // (required) ID of the HTML control in which Ajax File Browser will be created
        Id: 'AjaxFileBrowserContainer',
        
        // (required) the root folder to be displyed in Ajax File browser
        Url: 'http://webdavserver.com/dav/',
        
        // (required) always provide size of the control
        Style: 'height: 500px; width: 700px',
        
        // folder to be selected, same as SetSelectedFolderAsync call
        SelectedFolder: 'http://webdavserver.com/dav/Sales/',
        
        // path to MS Office templates, always specify full path
        MsOfficeTemplatesPath: 'http://webdavserver.com/dav/templates/',
        
        // theme name (folder name under /themes/ folder, for examle 'clean', 'golden', 'lumina', etc)
        ThemeName: 'windows_8',
        
        // icon size in desktop mode (available options are: 16, 24, 32, 48, 64, 72)
        IconsSize: 16,
        
        // display UI optimized for desktop or for touch screens ('desktop', 'mobile', 'auto')
        Platform: 'auto'
    };
    Using Settings object you can customize the AJAX File Browser appearence. The full description of this object could be found here. At a minimum in this object you must specify path to the folder where Ajax File Browser files are located, the parent object ID, WebDAV server URL and the size of the control. Usually you will also specify selected folder, path to Microsoft Office templates, theme and toolbar icons size. Here are descrptions for each property:

    • BasePath - Path to the folder whare AJAX File Browser files are located.

      Important! In case your Ajax File Browser files are located on the server that is different from the one on which the page with Ajax File Browser is located your server must enable CORS requests. Alternatively you can include .js and .css files directly on a webpage as described here.

    • 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! If your WebDAV server is located on a different domain or on a different port the server must enabe CORS requests. Find more detailes here.

    • Style - HTML style. At a minimum you must provide 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> 

    • 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 domain. To verify that your server meets all Microsoft Office requirements read the this article. This propery is required only if you run AJAX File Browser in IE and want to create Microsoft Office Word, Excel and Power Point documents.

    • ThemeName - theme name. This is must be the name of the folder under /themes/.

    • IconsSize - toolbar icons size in desktop mode.

    • Platform - fources Ajax File Browser to display UI optimized for desktop or for touch screens.

  4. Create the control loader, passing Settings object as a parameter and start loading Ajax File Browser files:
    var ajaxFileBrowserLoader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
    ajaxFileBrowserLoader.oninit = function(ajaxFileBrowser) {
        // This event is fired when control is loaded and created.
        // Your code here... 
    };
    ajaxFileBrowserLoader.LoadAsync();  // starts loading Ajax File Browser files asynchronously
     
  5. Add a viewport meta tag on a web page, this will provide the best visual representation in mobile web browsers. You may wish to force IE to run in latest rendering mode:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

 

 Here is how your HTML code will finally look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>IT Hit AJAX File Browser</title>
    
    <style type="text/css">
        html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;}
    </style>
    <script src="ITHitAJAXFileBrowserLoader.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InitAjaxFileBrowser() {
            var webDavServerPath = 'http://webdavserver.com/dav/';
 
            var settings = {
                BasePath: '/',                     
                Id: 'AjaxFileBrowserContainer',    
                Url: webDavServerPath,             
                Style: 'height: 100%; width: 100%',
                MsOfficeTemplatesPath: webDavServerPath + '/templates/',
                SelectedFolder: webDavServerPath,  
                ThemeName: 'windows_8',            
                IconsSize: 16                      
                //Platform: 'mobile'               
            };
            var ajaxFileBrowserLoader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
            ajaxFileBrowserLoader.oninit = function(ajaxFileBrowser) {
                // This event is fired when control is loaded and created.
                // Your code here...
            };
            ajaxFileBrowserLoader.LoadAsync();
        }
    </script>
</head>
<body onload="InitAjaxFileBrowser()">
<div id="AjaxFileBrowserContainer" class="ih_style" style="width: 100%; height: 100%"></div>
</body>
</html>