Basic Image Uploader for CKEditor in WebPages in ASP.NET - razor

Question

I am using CKEditor in a web application in ASP.NET WebPages (Razor).
I spent a number of days trying to figure out how to make and integrate a basic file manager to support uploading images to CKEditor. The documentation in this area is next to useless. Nothing addressed the WebPages environment. Lots of PHP and WebForms and MVC, but nothing specifically for WebPages.
I finally figured out how to do it and am sharing it here.
CK Editor has an attribute that can be added to the .Replace which tells CKEditor to add an "Upload" tab (that had a built-in file browser) to the Image Properties panel:
CKEDITOR.replace('editor1'
, {
filebrowserImageUploadUrl: 'imageUpload2'
}
);
where "imageUpload2" was the name of the cshtml file (imageUpload2.cshtml) that contained the upload logic. Adding that filebrowserImageUploadUrl caused the CKEditor image properties panel to be modified to display (in the newly added "Upload" menu tab) a "Browse" button and a "Send to Server" button.
The "Browse" button activates CKEditor's Built-in file browser patterned after the html input filetype "file"; the "Send To Server" button executes the file manager you coded (see below).
The procedure would be for the user to:
click on the Insert Image icon in the CKEditor menu
Click on the "Upload" tab in the image properties dialog
Click on the "Browse" button to browse folders on the client machine and select ("Open") the desired image file
Click on the "Send to Server" button to execute the file manager's code (imageUpload2.cshtml), saving the image file to the folder specified in the cshtml file and passing the url of the file back to CKEditor.
The code in the file manager is minimal - no bells or whistles:
#{
Layout = null;
var context=HttpContext.Current;
HttpPostedFile uploads = context.Request.Files["upload"];
//get full filename
string file = System.IO.Path.GetFileName(uploads.FileName);
//get extension (including the period)
string ext = System.IO.Path.GetExtension(uploads.FileName);
//CKEditorFuncNum is passed in from the image propoerties panel in CKEditor
string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
//use whatever folder name you prefer - make sure it has read/write permissions on the server
string url = Href("~/imageUploads/" + file);
var message = " .jpg .jpeg .gif .png ".Contains(ext.ToLower())?"":ext+" is invalid file type";
//Save file if it is one of the allowable extensions
if(String.IsNullOrEmpty(message))
{
uploads.SaveAs(context.Server.MapPath(".") + url );
}
//create return javascript to CKEditor (must have <script></script> tags)
var responseFormat = "<script>window.parent.CKEDITOR.tools.callFunction({0}, \"{1}\", \"{2}\");</script>";
var responseText = String.Format(responseFormat, CKEditorFuncNum, url, message);
//send script back to CKEditor image properties popup and close this page
context.Response.Write(responseText);
context.Response.End();
}
I hope this saves someone else the time I wasted trying to figure out what worked.