Alternate solution to ckfinder or kcfinder. Codeigniter 4

I noticed codeigniter 4 handles sessions differently than previous versions of CodeIgniter. So I had ckeditor with kcfinder, which was no longer allowing the upload and browsing of images without leaving it open to the public.

Is the kcfinder browser really needed?

Thats the question I asked myself, and I decided that I don't really need the image browser, and I only really need the upload feature within ckeditor. So the solution was to write a simple uploader script in codeigniter.

KCfinder upload replacement

The code below is a controller which can be used in codeigniter. You just need to change the path information for where your images will be stored.


<?php
namespace App\Controllers;
use CodeIgniter\Files\File;

class Uploader extends BaseController
{

    protected $helpers = ['form'];

    public function __construct()
        {
        }

    function index()
        {
        $validation = \Config\Services::validation();
        $rules = [
                'upload' => [
                    'label' => 'Image File',
                    'rules' => [
                        'is_image[upload]',
                        'mime_in[upload,image/jpg,image/jpeg,image/gif,image/png,image/webp]',
                        'max_size[upload,500000]',
                        'max_dims[upload,500000,500000]',
                    ],
                ],
        ];
        if (! $this->validate($rules))
            {
            $request = \Config\Services::request();
            echo "error";
            }
        else
            {
            $request = \Config\Services::request();
            $img = $this->request->getFile('upload');
                if (! $img->hasMoved()) 
                    {
                    $filepath =  $img->store(config('WebsiteConfig')->upload_folder);

                    $userfile = ['uploaded_fileinfo' => new File($filepath)];
                    $file_name = explode ('/', $userfile['uploaded_fileinfo']);
                    $image = \Config\Services::image();
                        try {
                            $image->withFile($_SERVER["DOCUMENT_ROOT"] . config('WebsiteConfig')->thumb_path . $img->getName())
                                ->resize(551, 300)
                                ->save($_SERVER["DOCUMENT_ROOT"] . config('WebsiteConfig')->thumb_path. 'thumbs/' . $img->getName());
                        } catch (CodeIgniter\Images\Exceptions\ImageException $e) {
                            echo $e->getMessage();
                        }
                    $function_number = $_GET['CKEditorFuncNum'];
                    $message = '';
                    $url = '/assets/uploads/'. $img->getName();
                    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message')</script>";
                    }
                }  
            }
        } 


Replace Image Paths

Simply replace the paths defined in this to the paths for your project. After that you can change the config of ckeditor to load the new uploader like below.


$config['filebrowserImageUploadUrl'] = '/uploader'; 


Protect with Codeigniter Shield

Now you just need to protect the uploader controller with CodeIgniter shield by adding a filter in the config/filters.php file



'group:admin,superadmin'  => ['before' => ['Uploader']],

That's it. You should be able to use the upload option when adding an image in ckeditor. I hope someone found this useful. If you're like me and only need the uploader you can completely delete kcfinder or ckfinder, as they just add extra unneeded bulk to your application.

Comments