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...
Continuing the previous POST  how to use ckeditor in asp.net mvc

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

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