In CKEditor by default file browser option is not enabled.
You can only add a file to an editor with URL.
To add file browser option require to update CKEditor configuration and use options while initialization.
In this tutorial, I show how you can add file browser option in CKEditor and upload it with PHP.
Contents
1. Download & Include
- Download CKEditor from here.
- Extract the downloaded zip file in your project directory.
- Include
ckeditor.jslibrary either in<head>or end of<body>section.
<script src="ckeditor/ckeditor.js" ></script>
OR
- You can also use CDN.
<script src="//cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
2. Edit config.js
Open ckeditor/config.js file and add the following code after config.removeDialogTabs.
config.filebrowserUploadMethod = 'form'; // Added for file browser
3. HTML & JavaScript
HTML
Create a <textarea>.
JavaScript
Initialize CKEditor on the <textarea> element and define filebrowserUploadUrl, and filebrowserImageUploadUrl options. Pass the file path from where handle file upload.
The path on both options are the same but to detect is image or file is upload added ?type= with the URL.
Completed Code
<!DOCTYPE html>
<html>
<head>
<title>Custom file upload in CKEditor with PHP</title>
<!-- CKEditor JS -->
<script src="ckeditor/ckeditor.js" type="text/javascript" ></script>
</head>
<body>
<!-- Editor -->
<textarea id='editor'></textarea>
<!-- Script -->
<script type="text/javascript">
CKEDITOR.replace( 'editor', {
height: 300,
filebrowserUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=file",
filebrowserImageUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=image",
} );
</script>
</body>
</html>
4. PHP
Create a new uploads directory and ajaxfile.php file.
Read parameters.
If $type == ‘image’ then check its extension is valid or not. If valid then upload the file to uploads directory and return the –
<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>
Which contains the $_GET['CKEditorFuncNum’], $_GET[‘CKEditor’], and file URL.
Similarly, if $type == ‘file’ then check the extension. If valid then upload the file to uploads directory and return the –
<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>
Completed Code
<?php
// Parameters
$type = $_GET['type'];
$CKEditor = $_GET['CKEditor'];
$funcNum = $_GET['CKEditorFuncNum'];
// Image upload
if($type == 'image'){
$allowed_extension = array(
"png","jpg","jpeg"
);
// Get image file extension
$file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION);
if(in_array(strtolower($file_extension),$allowed_extension)){
if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){
// File path
if(isset($_SERVER['HTTPS'])){
$protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
}
else{
$protocol = 'http';
}
$url = $protocol."://".$_SERVER['SERVER_NAME'] ."/ckeditor_fileupload/uploads/".$_FILES['upload']['name'];
echo '<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>';
}
}
exit;
}
// File upload
if($type == 'file'){
$allowed_extension = array(
"doc","pdf","docx"
);
// Get image file extension
$file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION);
if(in_array(strtolower($file_extension),$allowed_extension)){
if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){
// File path
if(isset($_SERVER['HTTPS'])){
$protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
}
else{
$protocol = 'http';
}
$url = $protocol."://".$_SERVER['SERVER_NAME'] ."/ckeditor_fileupload/uploads/".$_FILES['upload']['name'];
echo '<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>';
}
}
exit;
}
5. Output
6. Conclusion
Update file upload restrictions and file return path in the AJAX file. And make sure to add config.filebrowserUploadMethod = 'form'; in config.js file otherwise file path doesn’t return after upload.
This solution didn’t work for me
What issue are you getting?
Thanks! I’ve been trying to make this work for days. The key was changing the upload method in the config file. I can’t believe how much time I wasted before learning that in your blog. Thanks again!
You’re welcome.
Amazing! Can’t thank you enough. Follow the exact steps and it sure works like charm.
Glad you found this helpful.
Ckeditor5 has come … can you please tell us how to upload image in that
Uploead file not work for me
Hi Kim,
Is any error displaying in the browser console?
why error when uploading file (404 : file not found)
Hello,
It doesn’t work with the latest version of CKEditor 4: It expects a JSON answer from the php file.
I used the following to make it work:
echo ‘{“uploaded”: 1, “filename”: “‘.$_FILES[‘upload’][‘name’].'”, “url”: “‘.$url.'”}’;
Check this:
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html
Cheers!
Hi Yann,
Thanks for letting me know about the issue. I will try to update the tutorial with the latest version.
I am getting error –
Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
Apache/2.4.41 (Win64) OpenSSL/1.1.1c PHP/7.2.26
Hi Vishal,
I checked the code it is working fine. Have you checked your PHP file URL and tried to update it?
hi i have error when upload error is HTTP error occurred during file upload (404: File not found)
hello! the code was amazing, i can easily insert image through my editor but i faced an issue that was present in tag some slashes was added to this tag due to which i also found file not found error and every time i was inserting another /r/n/ is also added. How to resolve this?