Skip to content

Instantly share code, notes, and snippets.

@RedactedProfile
Last active February 16, 2024 02:08
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save RedactedProfile/ac48c270d2bbe739f9f3 to your computer and use it in GitHub Desktop.
Save RedactedProfile/ac48c270d2bbe739f9f3 to your computer and use it in GitHub Desktop.
CKEditor File Upload with Node and Express
var express = require('express');
var router = express.Router();
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
router.get('/', function(req, res) {
res.render('index');
});
router.post('/uploader', multipartMiddleware, function(req, res) {
var fs = require('fs');
fs.readFile(req.files.upload.path, function (err, data) {
var newPath = __dirname + '/../public/uploads/' + req.files.upload.name;
fs.writeFile(newPath, data, function (err) {
if (err) console.log({err: err});
else {
html = "";
html += "<script type='text/javascript'>";
html += " var funcNum = " + req.query.CKEditorFuncNum + ";";
html += " var url = \"/uploads/" + req.files.upload.name + "\";";
html += " var message = \"Uploaded file successfully\";";
html += "";
html += " window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);";
html += "</script>";
res.send(html);
}
});
});
});
module.exports = router;
doctype html
body
form
textarea#ckeditor(name="content")
script.
CKEDITOR.replace('ckeditor', {
filebrowserUploadUrl: '/uploader'
});
@Markvandersteen
Copy link

Thank you for sharing!

@harish2704
Copy link

Thanks

@EdByrnee
Copy link

EdByrnee commented Jun 16, 2017

Very confused

Can't seem to get this working.

Request returns 200 but CKEditor doesn't seem to do anything
I assume I have CKEditor configured correctly otherwise it would not return successfully. Confused on what step to try next

Here is what I'm returning at the moment:

<script type='text/javascript'>    var funcNum = 2;    var url     = "http://www.kennedycentre.co.uk/wp-content/uploads/2013/12/homebargains.png";    var message = "Uploaded file successfully";    window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);</script>

@thuc101
Copy link

thuc101 commented Aug 24, 2017

thank for share, whate simple you are.

@milkcat1994
Copy link

Thank you for sharing!

@shiva9610
Copy link

shiva9610 commented Apr 3, 2018

req.query.CKEditorFuncNum it will return undefined in every case how can i solve this problem for ckeditor full package

@tyty9798123
Copy link

please use ckeditor 4.6
cdn link : https://cdn.ckeditor.com/4.6.0/standard/ckeditor.js
if you use 4.11 version
you will get error when backend response javascript code.

@Mawandaian
Copy link

I have looked for a fully working demo, to guide me step by step but I have failed. I even checked the ckeditor documentation for image upload but I am not understanding anything. Can someone help me with a detailed step to step approach to this problem with clear explanation, or is there a link that I can follow. Thanks

@ReDoProgrammer
Copy link

ReDoProgrammer commented Nov 16, 2020

I always get an error not found (404) with folder uploader in two cases: set static path and not athough i create folder in root or in public folder. Why?

@abirrugal
Copy link

abirrugal commented Nov 22, 2020

I always get an error not found (404) with folder uploader in two cases: set static path and not athough i create folder in root or in public folder. Why?

Use a dot(.) after +' sign. Like this: __dirname + './../public/uploads/' + req.files.upload.name;
It will save uploaded image to public/uploads So make a directory name uploads inside public directory first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment