Tuesday, March 7, 2017

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:
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);
}

No comments:

Post a Comment