How to change the default browse directory for images in KCFinder?

Question

I'm using CKEditor with KCFinder. Everything works great except one thing.

My default upload URL is:

'uploadURL' => "/userfiles"

Let's say I want to upload an image. I click on Upload image in CKEditor, then I click on Browse the Server to select one already uploaded. Problem is that CKEditor is browsing /userfiles/images instead of just /userfiles like I would like to.

I understand that this is not a bug and just a way it was set up but how do I change it?

I didn't find anything on http://kcfinder.sunhater.com

Answer 1

Here is my solution. CKEditor config:

<?php $filesFolder = "topic123"; ?>
CKEDITOR.replace('contentEditor', {
   filebrowserBrowseUrl: '/public/plugins/ckfinder/ckfinder.html?type=<?=$filesFolder?>'
});

I've specified only one parameter filebrowserBrowseUrl and passed the type. Now when you open whatever, url, images or flash dialogs, it will show only one directory.

Then in CKFinders config.php file:

$config['backends'][] = array(
    'name'         => 'topic_files',
    'adapter'      => 'local',
    'baseUrl'      => '/data/topics/',
   //'root'         => '', // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
);

if (!empty($_GET['type'])) {
    //Folder for topics
    if (preg_match("/^topic\d+$/", $_GET['type'])) {
        $config['resourceTypes'][] = [
            'name'              => $_GET['type'],
            'directory'         => $_GET['type'],
            'maxSize'           => 0,
            'allowedExtensions' => $allowedExtensions,
            'deniedExtensions'  => '',
            'backend'           => 'topic_files'
        ];
    }
}

If the folder (topic123) doesn't exists, it will create it when you upload a file.

Answer 2

It can be done in many ways. I am explaining a process, which I applied as per my php applications' code structure. The same code structure/framework I followed for different applications, with each application as a sub-folder in my server. So, there is a logical need to use one single CKeditor with KCfinder and configure it in some way, so that it work properly for all the applications. The content part of CKeditor is ok. It can easily be reused by different applications or projects from a single CKeditor component. But the problem arises with file upload, like image, video or any other document. To make it applicable for different project, the files must be uploaded in separe folders for different projects. And for that $_CONFIG['uploadURL'] must by configured with dynamic folder path, means different folder path for each project, but calling the the same CKeditor KCfinder component in the same location. I am explaning some differnt process together in a step-by-step way. Those worked for me fine with KCfinder version 2.51 and I hope they will work for others as well. If it does not work for other developrs, then may be they need to make some tweaks in those process as per their project code structure and folder write permission as well as per the CKeditor and KCfinder version.

1) In CKeditor\filemanagers\kcfinder_2_51\config.php file

a) In $_CONFIG array definition, search for this line 'disabled' => false, and if you find any replace it with 'disabled' => true, At the end of that file put the following code. The code is self explaining with the logic and details commented out within it. The code is:

//Code to assign $_CONFIG['uploadURL'] dynamic value: different for different projects or sites: added by Mrinal Nandi on 5 oct, 2013: start
//session dependent dynamic $_CONFIG['uploadURL'] setting :start 

////session dependent secure method: only for single site setting: i.e. one CKeditor KCfinder for each one project domain or subdomain, not one CKeditor KCfinder for multiple project:start    
//  session_start();
//if(isset($_SESSION['KCFINDER']['uploadURL']) && $_SESSION['KCFINDER']['uploadURL']!="") { //$_SESSION['SESSION_SERVER_RELATIVEPATH']: relative folder path of the project corresponding to the webroot; should be like "/project/folder/path/"  //set this session variable in a common file in your project where the session started 
//  $file_upload_relative_path=$_SESSION['KCFINDER']['uploadURL'];  
//}
////session dependent secure method: only for single site setting: i.e. one CKeditor KCfinder for each one project domain or subdomain, not one CKeditor KCfinder for multiple project:start


//Using a single CKeditor KCfinder component for different projects or sites (multisite): start

//session dependent settings a single CKeditor KCfinder component for different projects or sites (multisite): start 
//Assuming different session_name for different projects, if represented as different sub-folders, but not work if represented as sub-domains or different domains 
//Secure and deny access for unauthorized users without any session, thus restrict access via direct link  
//but not work if projects represented as sub-domains or different domains, then have to use the session independent way provided bellow (though it is insecure), or have to implement some session related way as per the project flow and structure   

session_name(base64_decode($_REQUEST['param_project'])); 
session_start();    

if(isset($_SESSION['KCFINDER']['uploadURL']) && $_SESSION['KCFINDER']['uploadURL']!="") { //$_SESSION['SESSION_SERVER_RELATIVEPATH']: relative folder path of the project corresponding to the webroot; should be like "/project/folder/path/"  //set this session variable in a common file in your project where the session started 
    $file_upload_relative_path=$_SESSION['KCFINDER']['uploadURL'];  

}
//session dependent settings a single CKeditor KCfinder component for different projects or sites (multisite): end 



//session dependent dynamic $_CONFIG['uploadURL'] setting :end 

////session independent dynamic $_CONFIG['uploadURL'] setting: without using session :start
//if(isset($_REQUEST['param_project']) && $_REQUEST['param_project']!=""){ //base64 encoded relative folder path for file upload in the project,  corresponding to the webroot; should be like "/project/folder/file/upload/path/" before encoding 
//  $file_upload_relative_path=base64_decode($_REQUEST['param_project']);
//  
//}
////session independent dynamic $_CONFIG['uploadURL'] setting: without using session :end 


if(isset($file_upload_relative_path) && trim($file_upload_relative_path)!="" ){
    if(isset($_SESSION['KCFINDER']['uploadURL'])){
        $_CONFIG['disabled']=false;
    } else if(is_dir($file_upload_relative_path)) { //to make it relatively secure so that hackers can not create any upload folder automatcally in the server, using a direct link and can not upload files there 
        $_CONFIG['disabled']=false;
    }
}
// Path to user files relative to the document root.
$_CONFIG['uploadURL']= $file_upload_relative_path;
$_CONFIG['param_project'] = $_REQUEST['param_project'];
//Using a single CKeditor KCfinder component for different projects or sites (multisite): end 

//Code to assign $_CONFIG['uploadURL'] dynamic value: different for different projects or sites: added by Mrinal Nandi on 5 oct, 2013: end 

2) In ckeditor\filemanagers\kcfinder_2_51\js\browser\misc.js

Search for this line: var data = 'browse.php?type=' + encodeURIComponent(this.type) + '&lng=' + this.lang;

Replace it with that line:

var data = 'browse.php?type=' + encodeURIComponent(this.type) + '&lng=' + this.lang + '&param_project=' + this.param_project;

3) In ckeditor\filemanagers\kcfinder_2_51\tpl\tpl_javascript.php

Search for this line: browser.type = "type) ?>";

Put these commands after that line:

browser.param_project = "<?php echo text::jsValue($this->config['param_project']) ?>";

4) In ckeditor\filemanagers\kcfinder_2_51\core\uploader.php Search for this lines in __construct() function :

if (isset($this->config['_check4htaccess']) &&
    $this->config['_check4htaccess']
) {
    $htaccess = "{$this->config['uploadDir']}/.htaccess";
    if (!file_exists($htaccess)) {
        if (!@file_put_contents($htaccess, $this->get_htaccess()))
            $this->backMsg("Cannot write to upload folder. {$this->config['uploadDir']}");
    } else {
        if (false === ($data = @file_get_contents($htaccess)))
            $this->backMsg("Cannot read .htaccess");
        if (($data != $this->get_htaccess()) && !@file_put_contents($htaccess, $data))
            $this->backMsg("Incorrect .htaccess file. Cannot rewrite it!");
    }
}

And comment out that full section

4) Now where you want to show the CKeditor in your project, you have to put those lines in the corresponding php file/page, obviously with changed values of variables corresponding to your project/app. But please read the comments first to decide what lines you should keep and what should be commented out as per your flow:

include_once(Absolute/Folder/path/for/CKeditor/."ckeditor/ckeditor.php") ; 

//If you did not want a session oriented way, cooment out the session related lines
$_SESSION['KCFINDER'] = array();                                    
$_SESSION['KCFINDER']['uploadURL']=$SERVER_RELATIVEPATH."userfiles/"; 

$CKEditor = new CKEditor();
$CKEditor->basePath = HTTP_COMPONENTPATH."ckeditor_3.6.2/ckeditor/";

//$_SESSION['KCFINDER']['uploadURL']="/userfiles/fashion_qr/";

$CKEditor->config["filebrowserBrowseUrl"] = ($CKEditor->basePath)."filemanagers/kcfinder_2_51/browse.php?type=files&param_project=".base64_encode(session_name());
$CKEditor->config["filebrowserImageBrowseUrl"] = ($CKEditor->basePath)."filemanagers/kcfinder_2_51/browse.php?type=images&param_project=".base64_encode(session_name());
$CKEditor->config["filebrowserFlashBrowseUrl"] = ($CKEditor->basePath)."filemanagers/kcfinder_2_51/browse.php?type=flash&param_project=".base64_encode(session_name());

$CKEditor->editor("Content", getIfSet($data['Content']));
//if you did not want a session oriented way, then in the above code code segment, just replace all the texts: base64_encode(session_name()) with this one: base64_encode(session_name($SERVER_RELATIVEPATH."userfiles/"))  

And you are done.

Answer 3

Own Folders for Files Types in CKEDITOR/FCKEDITOR: If you want to use your OWN FOLDERS for Images, Files just config in CKEDITOR/FCKEDITOR config.js

this lines:

    //KCFINDER
CKEDITOR.editorConfig = function( config ) {
   config.filebrowserBrowseUrl = '/kcfinder-2.51/browse.php?type=file';
   config.filebrowserImageBrowseUrl = '/kcfinder-2.51/browse.php?type=image';
   config.filebrowserFlashBrowseUrl = '/kcfinder-2.51/browse.php?type=flash';
   config.filebrowserUploadUrl = '/kcfinder-2.51/upload.php?type=file';
   config.filebrowserImageUploadUrl = '/kcfinder-2.51/upload.php?type=image';
   config.filebrowserFlashUploadUrl = '/kcfinder-2.51/upload.php?type=flash';
};

For Example if you want to use for you Images a folder "ImagesMyOwnFolder" ==> change line to config.filebrowserImageBrowseUrl = /kcfinder-2.51/browse.php?type=ImagesMyOwnFolder';

Hopefully this help others who want to use there own folders or existing folder from a other filemanager which already there and cant be moved.

Answer 4

I found an even better workaround.

The magic occurs when, in your config.php file, you define:

'types' => array(
        // CKEditor & FCKEditor types
        'files'   =>  "disabled",
        'flash'   =>  "disabled",
        'images'  =>  "*img",

        // TinyMCE types
        'file'    =>  "disabled",
        'media'   =>  "disabled",
        'image'   =>  "*img",
    ),

This says that KCfinder will create an "images" directory and store images. I have a "files" directory disabled, since I don't allow my users to upload files.

What you do if you want them at the root directory is add a '' entry (blank), and assign what they can upload. In my server I have:

'types' => array(
        '' => "*img",
        // CKEditor & FCKEditor types
        'files'   =>  "disabled",
        'flash'   =>  "disabled"
    ),

Which lets me upload image files directly to the root folder.

Answer 5

I had the same problem, until I tried the following with session parameters (dynamic settings; http://kcfinder.sunhater.com/docs/install#dynamic):

$_SESSION['KCFINDER']['uploadURL'] = '/some_directory/some_subdir';
$_SESSION['KCFINDER']['uploadDir'] = '../some_directory/some_subdir';

The "uploadURL" must refer to the "html" path, i.e. the absolute path from your server root that your html tags will recognize. As an example, if your files are located under a directory named "images" at the root of your web server, you will have:

$_SESSION['KCFINDER']['uploadURL'] = '/images';

The "uploadDir" must refer to the relative path of the directory containing the files you wish to access to OR the absolute path from your DISK root (example: /var/www/html/.....). I think it is better to use a relative path from the location of your KCFinder installation path, since this way it will be portable. Continuing with the same example as above, and considering that KCFinder is installed in /web_apps/kcfinder, then you will have this:

$_SESSION['KCFINDER']['uploadDir'] = '../../images';

Hope this helps!