http://kcfinder.sunhater.com/demos/standalone http://kcfinder.sunhater.com/docs/install http://inwebdeveloper.com/2010/06/27/ckfinder-open-source-web-file-manager/ http://kcfinder.sunhater.com/docs/integrate#ckeditor http://kcfinder.sunhater.

com/demo/custom/ KCFinder custom integration examples

Replace /kcfinder/ path to location you place KCFinder sources. You may also add type parametter to specify type directory you want to browse. Example: /kcfinder/browse.php? type=images

Example 1: Click on the input box

<script type="text/javascript"> function openKCFinder(field) { window.KCFinder = { callBack: function(value) { field.value = value; } }; window.open('/kcfinder/browse.php', 'kcfinder', 'status=0, toolbar=0, location=0, menubar=0, directories=0, ' + 'resizable=1, scrollbars=0, width=800, height=600' ); } </script> <input type="text" readonly="readonly" title="Click to browse the server" onclick="openKCFinder(this)" />

Example 2: Click the "Browse server" button

<script type="text/javascript"> function openKCFinder(field) { window.KCFinder = { callBack: function(value) { document.getElementById(field).value = value; } }; window.open('/kcfinder/browse.php', 'kcfinder', 'status=0, toolbar=0, location=0, menubar=0, directories=0, ' + 'resizable=1, scrollbars=0, width=800, height=600' ); }

</script> <input type="text" id="kc_file" readonly="readonly" /> <input type="button" value="Browse server" onclick="openKCFinder('kc_file')" />

Example 3: Inline file manager

<style type="text/css"> #kcfinder_in { display: none; position: absolute; width: 800px; height: 600px; background: #e0dfde; border: 2px solid #3687e2; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 1px; } </style> <script type="text/javascript"> function openKCFinder(field) { var div = document.getElementById('kcfinder_in'); if (div.style.display == "block") { div.style.display = 'none'; div.innerHTML = ''; return; } window.KCFinder = { callBack: function(value) { field.value = value; div.style.display = 'none'; div.innerHTML = ''; } }; div.innerHTML = '<iframe name="kcfinder" src="/kcfinder/browse.php" frameborder="0" ' + 'width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no" />'; div.style.display = 'block'; } </script> <input type="text" readonly="readonly" title="Click to browse the server" onclick="openKCFinder(this)" /><br /> <div id="kcfinder_in"></div>

Example 4: Select image

Choose an image
<style type="text/css"> #image { width: 100px; height: 100px; border: 1px solid #999; overflow: hidden; cursor: pointer; } #image:hover { border-color: #f00; } #image img { visibility: hidden; } </style> <script type="text/javascript"> function openKCFinder(div) { window.KCFinder = { callBack: function(fileURL) { div.innerHTML = "Loading..." var img = new Image(); img.src = fileURL; img.onload = function() { div.innerHTML = '<img id="img" src="' + fileURL + '" />'; var img = document.getElementById('img'); var o_w = img.offsetWidth; var o_h = img.offsetHeight; var f_w = div.offsetWidth; var f_h = div.offsetHeight; if ((o_w > f_w) || (o_h > f_h)) { if ((f_w / f_h) > (o_w / o_h)) f_w = parseInt((o_w * f_h) / o_h); else if ((f_w / f_h) < (o_w / o_h)) f_h = parseInt((o_h * f_w) / o_w); img.style.width = f_w + "px"; img.style.height = f_h + "px"; } else { f_w = o_w; f_h = o_h; } img.style.marginLeft = parseInt((div.offsetWidth - f_w) / 2) + 'px'; img.style.marginTop = parseInt((div.offsetHeight - f_h) / 2) + 'px'; img.style.visibility = "visible"; } } }; window.open('/kcfinder/browse.php?type=images', 'kcfinder', 'status=0, toolbar=0, location=0, menubar=0, directories=0, ' + 'resizable=1, scrollbars=0, width=800, height=600' ); }

</script> <div id="image" onclick="openKCFinder(this)">Choose an image</div>

http://kcfinder.sunhater.com/docs/install : in your web site.

Installation

1. Copy the distribution files to your web server inside the /kcfinder directory or any other directory 2. Create a directory in the server to hold all uploaded files. By default, KCFinder is configured to use
the /kcfinder/upload/ directory. 3. Make the above upload directory writable by the internet user. On Linux, chmod it to 0777. Configuration KCFinder settings are located in config.php file organized as associative array. The keys of the array are the names of the settings. The settings with names not begins with underscore can be overrided with an user session. I'll call them Dynamic Settings. These settings must be uncommented and existed in config.php. If you are upgrading KCFinder please check the new config.php file for new settings. The other settings (with names begins with underscore) can be removed or commented and cannot be overrided with an user session. I'll call them Static Settings. Dynamic Settings 'disabled' => true, By default KCFinder is disabled. If you just set this setting to false all public visitors can upload and manage files in your web site. It is recommended to override this setting with sesssion configuration. 'readonly' => false, If it is set to true read-only filesystem actions will be available only. 'denyZipDownload' => true, To enable downloading multiple files as single ZIP file, you should set this setting to false. Also PHP ZIP extension should be available. 'theme' => "oxygen", Visual theme of KCFinder. Currently only oxygen theme is available. 'uploadURL' => "upload", URL path to main uploaded files directory. At the example above the path is relative to KCFinder main directory. Other examples: /files/upload - relative to the site root ../upload - 'upload' directory in parent of KCFinder directory 'uploadDir' => "", Local filesystem path to main uploaded files directory. If you leave this setting empty, KCFinder will try to suggest it regarding uploadURL setting. Fill this setting in case when KCFinder can't fetch the path automaticaly. 'dirPerms' => 0755, 'filePerms' => 0644, Directory and file permissions when creating or uploading them. Windows servers will skip these settings. 'deniedExts' => "exe com msi bat php cgi pl", Global denied file extensions. Will be checked upon upload or rename a file.

'types' => array( // The folowing directory types are just for an example 'files' => "", 'flash' => "swf", 'media' => "swf flv avi mpg mpeg qt mov wmv asf rm", 'misc' => "! pdf doc docx xls xlsx", 'images' => "*img", 'mimages' => "*mime image/gif image/png image/jpeg", 'notimages' => "*mime ! image/gif image/png image/jpeg", ), The Directory Types represented by associative array. The keys of the array defines directory names of the types. Directories will be created in the main upload directory. The values of the array defines the type of the files which can be uploaded in the directory. If the value is an empty string, files with any type can be uploaded. There are three value formats: 1. Space separated file extensions defines allowed extensions. 2. Values begins with "!" defines denied file extensions. 3. Special types begins with "*". *img - Images which can be handled by GD extension.

*mime - MIME types of upload files. Works only if Fileinfo PHP extension is available. If a "!" is
placed after *mime the followed MIME types will be denied in the directory Since version 2.0, KCFinder supports specific settings for Directory Types. You can specify some of the dynamic settings to a Directory Type. To do this you should to change the schema of the types array. The values should be associative arrays. The element with key type defines the type of files which can be uploaded. Any other key defines specific Directory Type setting. Example: 'types' => array( 'files' => array( 'type' => "", 'thumbWidth' => 100, 'thumbHeight' => 100, }, 'flash' => array( 'type' => "swf", 'denyZipDownload' => false, }, 'images' => array( 'type => "*img", 'thumbWidth' => 150, 'thumbHeight' => 150, ), ), The settings you can use for Directory Types are: disabled, theme, dirPerms, filePerms, denyZipDownload, maxImageWidth, maxImageHeight, thumbWidth, thumbHeight and jpegQuality. 'mime_magic' => "", Full path to magic file. This setting is related to *mime Directory Type. If you don't wish to use MIME type detection, you could skip this setting. The magic file must be on local filesystem. If you leave this setting empty, default magic file will be loaded. Default magic file path depends on your server's platform (usualy /usr/share/misc/magic).

'maxImageWidth' => 0, 'maxImageHeight' => 0, Maximum image width & height. If uploaded image resolution exceeds these settings it will be resized. If both are set to sero, images will not be resized. If one of these settings is set to zero, the image will be proportional resized regarding not zero setting. 'thumbWidth' => 100, 'thumbHeight' => 100, Resolution of generated thumbnails. 'thumbsDir' => ".thumbs", Thumbnails directory location, relative to main upload directory. If it does not exists, KCFinder will create it. 'jpegQuality' => 90, JPEG compression quality of thumbnails and resized images. 'cookieDomain' => "", 'cookiePath' => "", Domain and path, cookies will be sent to. If domain is not set, opened domain in the browser will be selected. If path is not set, root ("/") path will be selected. See _sessionDomain and _sessionPath settings for example. 'cookiePrefix' => 'KCFINDER_', Cookie names prefix to prevent collisions with integrated applications. Static Settings '_check4htaccess' => true, Whether to check for .htaccess file in main upload folder. If it is set to true and the file does not exist, KCFinder will cheate it. '_tinyMCEPath' => "/tiny_mce", Path to TinyMCE sources. See TinyMCE Integration. '_sessionVar' => &$_SESSION['KCFINDER'], At the example above session settings are linked to session variable KCFINDER (don't remove the "&" character). This session variable can be set by integrating application to configure KCFinder before its opening. It should contains an array with overridable settings. The settings which are not exists in the array will be left with their values from config.php file. To enable KCFinder you should set in your application: $_SESSION['KCFINDER'] = array(); $_SESSION['KCFINDER']['disabled'] = false; But first of all you have to read Integration Session Configuration. '_sessionLifetime' => 30, Defines inactive user session lifetime in minutes. This setting needs _sessionDir setting. Otherwise other web scripts on your site can remove user sessions earlier. If you leave this setting commented, default session.gc_maxlifetime ini seting will be active. '_sessionDir' => "/full/path/to/directory",

Full path to directory to hold user sessions. Make sure that web server has full access permissions to this directory. If you leave this setting commented default session.save_path ini setting will be active. '_sessionDomain' => ".mysite.com", '_sessionPath' => "/my/path", Domain and path the session will be valid to. At the example above, session will be valid to *.mysite.com/my/path. If you leave this settings commented default session.cookie_domain and session.cookie_path ini settings will be active.

http://kcfinder.sunhater.com/docs/integrate#ckeditor : CKEditor Integration Demo

Integration

To make KCFinder default file browser for CKEditor you should edit config.js file in the main CKEditor directory: CKEDITOR.editorConfig = function(config) { config.filebrowserBrowseUrl = '/kcfinder/browse.php?type=files'; config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?type=images'; config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?type=flash'; config.filebrowserUploadUrl = '/kcfinder/upload.php?type=files'; config.filebrowserImageUploadUrl = '/kcfinder/upload.php?type=images'; config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?type=flash'; }; Please replace /kcfinder/ path to location you place KCFinder sources. You may also change these settings using CKEditor API. Refer to CKEditor documentation. FCKeditor Integration Demo Only versions 2.x of FCKeditor are supported! To make KCFinder default file browser for FCKEditor you should edit fckconfig.js file in the main FCKEditor directory and change these settings: FCKConfig.LinkBrowserURL = '/kcfinder/browse.php?type=files'; FCKConfig.ImageBrowserURL = '/kcfinder/browse.php?type=images'; FCKConfig.FlashBrowserURL = '/kcfinder/browse.php?type=flash'; FCKConfig.LinkUploadURL = '/kcfinder/upload.php?type=files'; FCKConfig.ImageUploadURL = '/kcfinder/upload.php?type=images'; FCKConfig.FlashUploadURL = '/kcfinder/upload.php?type=flash'; Please replace /kcfinder/ path to location you place KCFinder sources. You may also change these settings using FCKEditor API. Refer to FCKEditor documentation. TinyMCE Integration Demo Only versions 3.x of TinyMCE are supported! First of all, you should set _tinyMCEPath in KCFinder config.php file, pointed to TinyMCE source directory (where tiny_mce_popup.js is located). In JavaScript sources which creates the editor you should add file_browser_callback field in tinyMCE.init() object parameter: tinyMCE.init({ file_browser_callback: 'openKCFinder', ........... ........... }); Now make a function named openKCFinder. Replace /kcfinder/ with your path to main KCFinder directory. Also you may change width and height fields: function openKCFinder(field_name, url, type, win) { tinyMCE.activeEditor.windowManager.open({ file: '/kcfinder/browse.php?opener=tinymce&type=' + type, title: 'KCFinder', width: 700, height: 500, resizable: "yes",

}, {

inline: true, close_previous: "no", popup_css: false window: win, input: field_name

}); return false; } Take a look at types setting in KCFinder config.php file. TinyMCE has fixed directory types (file, media & image). Make sure they exists in configuration: 'types' => array( 'file' => "", 'media' => "swf flv avi mpg mpeg qt mov wmv asf rm", 'image' => "*img", ),

Custom Integration Input Parameters These are the GET paramatters you can add to the KCFinder URL. Example: /kcfinder/browse.php?type=images&lang=bg&dir=images/public The following table describes the input parameters you can use: Name(s) type Examplary Value images Description

Selects the Type Directory to use. Allowed values are the keys of types setting. If you don't specify it or specified Type Directory does not exist, KCFinder will choose the first defined one. Selects the language to use. If your language is missing, you can lng, lang, create a new localization file in lang directory. And don't forget to language, langCode de share it here ;-]. If you don't specify the language or the relevant file or lang_code does not exist, KCFinder will choose the English (en) language. The initial folter which will be opened. It should contain the Type Directory at the beginning. If the folder does not exist or it is outside dir images/public the Type Directory (using ../ and / prefixes), KCFinder will open the Type Directory root. KCFinder automaticaly checks the integrating applications. In same cases this parametter is the only way to let KCFinder know which opener tinymce application it is opened from. Possible values are: ckeditor, fckeditor, tinymce, custom Custom Applications To link selected file(s) from KCFinder to your web applications, you should create window.KCFinder object and window.KCFinder.callBack() method for single file or window.KCFinder.callBackMultiple() for multiple files. To avoid collisions it's recommended to add the object and method on KCFinder open and remove them on file(s) select. Examples: function openKCFinder_singleFile() { window.KCFinder = {}; window.KCFinder.callBack = function(url) {

window.KCFinder = null; // Actions with url parameter here }; window.open('/kcfinder/browse.php', 'kcfinder_single'); } function openKCFinder_multipleFiles() { window.KCFinder = {}; window.KCFinder.callBackMultiple = function(files) { window.KCFinder = null; for (var i; i < files.length; i++) { // Actions with files[i] here } }; window.open('/kcfinder/browse.php', 'kcfinder_multiple'); } The second parameter of window.open() defines the name of the opened popup window. If you are using multiple integrations on one page, it's recommended to use different window names. If you are using an <iframe> tags instead of window.open(), the name attributes should be different. Currently KCFinder can be used only from one opened instance in one page at the same time. If you are using multiple integrations in one page, you should disable opening of more than one KCFinder instance. See the demos: Textbox, Iframe, Image, Multiple files. Session Configuration You can configure KCFinder in your web application using the user session, but first of all you should synchronize session ini settings between your application and KCFinder. If your application does not change the default session ini settings you don't have to synchronize anything. In this case you can leave all _session* settings in config.php file commented, but the _sessionVar setting should be uncommented. In the other case you should check all session.* ini settings from your application and set them up the same for KCFinder. To do this, I suggest to use phpinfo() function, inserted in the place you want to operate with the session configuration for KCFinder. ... // Just display phpinfo() output phpinfo(); ...

... // Write phpinfo() output to a file ob_start(); phpinfo(); file_put_contents("/path/to/file.html", ob_get_clean()); ... Look at the "session" section of phpinfo() output. If there are some ini settings with "Local Value" different to "Master Value", you have to transfer local values of these settings to KCFinder PHP configuration. There are some ini settings you can set directly in config.php file: session.gc_maxlifetime, session.save_path, session.cookie_domain and session.cookie_path. '_sessionLifetime' => 30, // In minutes '_sessionDir' => "/path/to/session/files", '_sessionDomain' => ".mysite.com",

'_sessionPath' => "/my/path", If you don't want to setup the ini settings in config.php or there are other session.* ini settings to transfer, you can set them making a .htaccess file in the KCFinder root folder. Example: <IfModule mod_php5.c> php_value session.gc_maxlifetime 1800 php_value session.save_path /path/to/session/files php_value session.cookie_domain .mysite.com php_value session.cookie_path /my/path </IfModule> Or you can do this using ini_set() function calls in core/autoload.php file: ini_set('session.gc_maxlifetime', '1800'); ini_set('session.save_path', '/path/to/session/files'); ini_set('session.cookie_domain', '.mysite.com'); ini_set('session.cookie_path', '/my/path'); Note that you should insert this code outside __autoload() function! When synchronization is done, you can configure KCFinder from your application. For example you can configure upload directory for logged user in your web site: $_SESSION['KCFINDER'] = array(); $_SESSION['KCFINDER']['disabled'] = false; $_SESSION['KCFINDER']['uploadURL'] = "/users/" . $user['username'] . "/upload"; $_SESSION['KCFINDER']['uploadDir'] = "";