Revision as of 16:10, 16 December 2008

SelectFunction is the name of a special javascript function that may be called when file is selected inside of CKFinder. It can be used for example when CKFinder is working as a standalone file manager to insert a link to a file.

Suppose we have the following code to launch CKFinder:

<!-- include the CKFinder integration file -->
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
...
<script type="text/javascript">
var finder = new CKFinder() ;
finder.BasePath = '/ckfinder/' ;
finder.SelectFunction = ShowFileInfo ;
finder.Create() ;
</script>

In the code above, we have told CKFinder, that when file is selected by the user, the "ShowFileInfo" function should be called. The ShowFileInfo is a name of our custom function, which accepts two arguments passed by CKFinder:

• fileUrl - the url to selected file,
• data - a javascript object with additional information:
  • data["fileUrl"] - same as the first argument,
  • data["fileSize"] - size of a file in kilobytes, if the size of a file is smaller than 512b, it is set to 1(KB),
  • data["fileDate"] - returns the time the file was last modified (in the format: YYYYMMDDhhmm),
  • data["selectFunctionData"] - the value which was assigned to the SelectFunctionData property.

Example 1

function ShowFileInfo( fileUrl, data )
{
	alert( 'The selected file URL is "' + fileUrl + '"' ) ;

	var formatDate = function( date ) {
		return date.substr(0,4) + "-" + date.substr(4,2)  + "-" + date.substr(6,2) + " " + date.substr(8,2) + ":" + date.substr(10,2) ;
	}
	
	alert( 'The selected file URL is: "' + data['fileUrl'] + '"' ) ;
	alert( 'The size of selected file is: "' + data['fileSize'] + 'KB"' ) ;
	alert( 'The selected file was last modifed on: "' + formatDate( data['fileDate'] ) + '"' ) ;
	alert( 'The data passed to the function is: "' + data['selectFunctionData'] + '"' ) ;
}

(see js/standalone.html example in the _samples folder for a full example).

SelectFunctionData

As explained above, SelectFunctionData is a special data (string) that can be passed to the SelectionFunction. Usually it would be the ID of a HTML field that should be updated when file is selected - this way we are able to update multiple fields using the same select function.

Example 2

<!-- include the CKFinder integration file -->
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
...
<script type="text/javascript">
function BrowseServer( inputId )
{
	var finder = new CKFinder() ;
	finder.BasePath = '/ckfinder/' ;
	finder.SelectFunction = SetFileField ;
	finder.SelectFunctionData = inputId ;
	finder.Popup() ;
}

function SetFileField( fileUrl, data )
{
	document.getElementById( data["selectFunctionData"] ).value = fileUrl ;
}
</script>
...
<p>
	<strong>Selected File URL</strong><br/>
	<input id="xFilePath" name="FilePath" type="text" size="60" />
	<input type="button" value="Browse Server" onclick="BrowseServer( 'xFilePath' );" />
</p>
<p>
	<strong>Selected Image URL</strong><br/>
	<input id="xImagePath" name="ImagePath" type="text" size="60" />
	<input type="button" value="Browse Server" onclick="BrowseServer( 'xImagePath' );" />
</p>

(see js/popups.html example in the _samples folder for a full example).