Last Updated: January 13, 2017
·
14.68K
· graup

Image Uploads with CKEditor and Laravel

There is docs out there, but they all miss some detail.

Here you go:

Create a route

Example:

Route::post('/upload_image', function() {
    $CKEditor = Input::get('CKEditor');
    $funcNum = Input::get('CKEditorFuncNum');
    $message = $url = '';
    if (Input::hasFile('upload')) {
        $file = Input::file('upload');
        if ($file->isValid()) {
            $filename = $file->getClientOriginalName();
            $file->move(storage_path().'/images/', $filename);
            $url = public_path() .'/images/' . $filename;
        } else {
            $message = 'An error occured while uploading the file.';
        }
    } else {
        $message = 'No file uploaded.';
    }
    return '<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>';
});

Add the following to your CKEditor config:

// Construct path to file upload route
// Useful if your dev and prod URLs are different
var path = CKEDITOR.basePath.split('/');
path[ path.length-2 ] = 'upload_image';
config.filebrowserUploadUrl = path.join('/').replace(/\/+$/, '');

// Add plugin
config.extraPlugins = 'filebrowser';

Congrats! Now you have an Upload tab in the image dialog.

Things that took me some time:

  • It's nowhere mentioned that you need the filebrowser plugin.
  • Make sure the URL points to the exact route. Depending on your settings /upload_image/ might redirect to /upload_image which will break the POST request.