InnovaStudio Asset Manager 2.0 (ASPNET Version)

Install

Unzip files to your website. XProFile.cs and XProFileConfig.cs must be copied to ASPNET App_Code folder.

Requirements:

• ASPNET Framework 4.x

Configuration

Set asset base folder and asset base virtual in App_Code/XProFileConfig.cs.

    //asset base - local path, ***NO TRAILING SLASH***
    public string XF_ASSET_BASE = "D:\\Projects\\xprofilenet\\asset";

    //asset base - virtual path, for displaying on page or link
    //use relative to website root path (starts with slash - /).
    public string XF_ASSET_BASE_VIRTUAL = "/asset";
    
    

You can configure other options in App_Code/XProFileConfig.cs if needed.

Script Include

Include scripts files in your page:

    <script src="path-to/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="path-to/xprofile_lang.js" type="text/javascript"></script>
    <script src="path-to/xprofiledialog.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="path-to/css/xprofiledialog.css" />    
    

Usage

Usage #1: Return selected file into textbox

    
    <input id="filename" type="text" size="40" value="" />
    <input type="button" class='file-select-button' data-target-input='filename' value="Select" />
    
    jQuery(document).ready(function() {
        jQuery(".file-select-button").xproFileDialog( {url: 'assetmain.aspx'} );
    }); 
    

Usage #2. Integrate to ContentBuilder

Integrate InnovaStudio Asset Manager to ContentBuilder to select image or file from server (requires ContentBuilder v1.8.3 or newer).

        $("#contentarea").contentbuilder({
            snippetFile: 'assets/default/snippets.html',
            onImageSelectClick: function(selEv) {
                dlg = new XPROFileDialog({
                    url: "pathto/assetmain.aspx",
                    onSelect: function(data) {					
                        var inp = jQuery(selEv.targetInput).val(data.url);
                    }
                });
                dlg.open();
            },
            onFileSelectClick: function(selEv) {
                dlg = new XPROFileDialog({
                    url: "pathto/assetmain.aspx",
                    onSelect: function(data) {							
                        var inp = jQuery(selEv.targetInput).val(data.url);
                    }
                });
                dlg.open();
            },
            toolbar: 'left'
        });        
    

Usage #3. Get selected file and display in DIV

    
    <div id="selFileName" style="padding: 6px;">No file selected</div>
    <p><input type="button" id="selectFile" value="Select" /></p>
    
    jQuery("#selectFile").xproFileDialog({
        url : "assetmain.aspx", //this is default (you can omit this)
        onSelect: function(data) {
            jQuery("#selFileName").html(data.url);
        }
    });    
    

Usage #4. Instantiate using Object Style

    var manager = new XPROFileDialog({
        url: "assetmain.aspx"
        onSelect: function(data) {
            alert(data.url);
        }
    });
    manager.open();
    

Other Options

1. To set max upload size

In assetmain.aspx, asset manager initialization:

    XPROFile.maxSize = 2000000; //in byte    
    

2. To set allowed file type

In assetmain.aspx, asset manager initialization:

    XPROFile.allowedTypes = ["jpg", "png", "gif", "txt", "jpeg", "zip", "pdf", "doc", "docx"];
    //to allow all: XPROFile.allowedTypes = ["*"];
    

3. To set asset manager to readonly mode:

In assetmain.aspx, asset manager initialization

    XPROFile.readonly = true;  
    

4. To allow delete:

In assetmain.aspx, asset manager initialization

    XPROFile.allowDelete = true;  
    

5. To allow Rename:

In assetmain.aspx, asset manager initialization

    XPROFile.allowRename = true;  
    

6. To allow Edit (existing file on server):

In assetmain.aspx, asset manager initialization

    XPROFile.allowEdit = true;  
    

Localization

Server Side

Translate the string in App_Code/XProFileConfig.cs, for example

JavaScript Side

In xprofile_lang.js, create a new object and copy all the words from English version and translate.

    var XPROFileI18N_DK = {
    ...
    ...
    };
    

Then set the object as second argument in the following line in xprofile_lang.js:

    var _XFI18n = jQuery.extend(XPROFileI18n_EN, XPROFileI18N_DK);