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.
Written by Paul Grau
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Php
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#