Wiktor at 15:58, 21 December 2011

2011-12-21T15:58:50Z

Wiktor at 11:41, 27 August 2010

2010-08-27T11:41:35Z

Wiktor: Created page with '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…'

2010-05-17T07:28:31Z

Created page with '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…'

New page

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:

<source>

<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>
</source>

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 ====

<source>
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'] + '"' ) ;
}
</source>
(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 ====

<source lang="html4strict">

<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>
</source>
(see js/popups.html example in the _samples folder for a full example).

@@ Line 7: / Line 7: @@
 <source>
 <!-- include the CKFinder integration file -->
-<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
+<script type="text/javascript" src="/ckfinder/ckfinder_v1.js"></script>
 ...
 <script type="text/javascript">
@@ Line 53: / Line 53: @@
 <source lang="html4strict">
 <!-- include the CKFinder integration file -->
-<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
+<script type="text/javascript" src="/ckfinder/ckfinder_v1.js"></script>
 ...
 <script type="text/javascript">

@@ Line 43: / Line 43: @@
+}
 </source>
-(see js/standalone.html example in the _samples folder for a full example).
+(see standalone.html example in the _samples folder for a full example).
 === SelectFunctionData ===
@@ Line 82: / Line 82: @@
 </p>
 </source>
-(see js/popups.html example in the _samples folder for a full example).
+(see popups.html example in the _samples folder for a full example).

CKFinder 2.x/SelectFunction - Revision history

Wiktor at 15:58, 21 December 2011

Wiktor at 11:41, 27 August 2010

Wiktor: Created page with '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…'