How to use ckeditor with Image upload in asp.net mvc

In this post I will show you how to upload images using CkEditor in MVC.
Previously I had shown How to...
MVC:

• Forms Authentication in Asp.Net MVC 5
• FileUpload in ASP.Net MVC using Ajax
• Cascading DropDowns in Asp.Net MVC
• AngularJS with Web Api in Asp.net MVC using Token based Authentication
• Ajax helper Based Search in MVC
• Customizing Authorize attribute or Role based Authentication or Authorization in MVC
• Display message when user is not authorized in mvc
• How to use AutoMapper
• select option with multiple values
• CRUD operations using Bootstrap Modal in Asp.Net MVC
• Asynchronous Requests for CRUD operations in Asp.Net MVC

Continuing the previous POST  how to use ckeditor in asp.net mvc

Output:

Replace the code in the scripts as shown.

  

CKEDITOR.replace("txtEditor", {
 filebrowserWindowWidth: '1140',
 filebrowserWindowHeight: '580',

 filebrowserImageBrowseUrl: '/home/uploadPartial' + '?type=Images&Tab=' + selectedTab,
 filebrowserImageUploadUrl: '/home/uploadImagenow?command=QuickUpload&type=Images'
});

Now Add the following ActionResults in Home Controller

  

public void uploadnow(HttpPostedFileWrapper upload)
{
 if (upload != null && upload.ContentLength > 0)
 {
  string ImageName = upload.FileName;
  string path = System.IO.Path.Combine(Server.MapPath("~/images/uploads"), ImageName);
  upload.SaveAs(path);
 }
}

public ActionResult uploadImagenow(string Cntrol)
{
 var imgList = Server.MapPath("~/Images/uploads");
 var images = Directory.GetFiles(imgList).Select(x => new imagesVM
 {
  Url = Url.Content("/images/uploads/" + Path.GetFileName(x))
 });
 return View(images);
}