Skip to content

Instantly share code, notes, and snippets.

@afsharm
Last active December 8, 2021 17:22
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save afsharm/5660844 to your computer and use it in GitHub Desktop.
Save afsharm/5660844 to your computer and use it in GitHub Desktop.
How to add a simple file upload functionality to CKEditor in ASP.NET MVC. Use CKEditor as CKEDITOR.replace('Description', { filebrowserImageUploadUrl: '/ControllerName/UploadImage' }); It is an updated version of http://arturito.net/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/ For more information see
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadImage(HttpPostedFileBase upload, string CKEditorFuncNum, string CKEditor, string langCode)
{
//http://stackoverflow.com/a/4088194/167670
//http://arturito.net/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/
//http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx
if (upload.ContentLength <= 0)
return null;
// here logic to upload image
// and get file path of the image
const string uploadFolder = "UserImages";
var fileName = Path.GetFileName(upload.FileName);
var path = Path.Combine(Server.MapPath(string.Format("~/{0}", uploadFolder)), fileName);
upload.SaveAs(path);
var url = string.Format("{0}{1}/{2}/{3}", Request.Url.GetLeftPart(UriPartial.Authority),
Request.ApplicationPath == "/" ? string.Empty : Request.ApplicationPath,
uploadFolder, fileName);
// passing message success/failure
const string message = "Image was saved correctly";
// since it is an ajax request it requires this string
var output = string.Format(
"<html><body><script>window.parent.CKEDITOR.tools.callFunction({0}, \"{1}\", \"{2}\");</script></body></html>",
CKEditorFuncNum, url, message);
return Content(output);
}
@esraasoliman
Copy link

its runs ok, but when i click ok button it shows this message "Images source URL is missing " .
How can i solve this problem ???

@shunyh
Copy link

shunyh commented May 22, 2017

return a Url to img src.

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