Rename Uploaded Images in ASP.NET MVC Rich Text Editor

By using the InsertImageSettings property, you can specify the server handler to upload the selected image. Then bind the ImageUploadSuccess event to receive the modified file name from the server and update the Insert Image dialog.

Refer to the rename.cs controller file to configure the server-side handler.

A runnable demo application is available in this GitHub repository.

CSHTML

@Html.EJS().RichTextEditor("editor").InsertImageSettings(obj => obj.SaveUrl("/Home/Rename").Path("../Uploads/")).ImageUploadSuccess("onImageUploadSuccess").Render()

<script>
    function onImageUploadSuccess(args) {
        if (args.e.currentTarget.getResponseHeader('name') != null) {
            args.file.name = args.e.currentTarget.getResponseHeader('name');
            var filename = document.querySelectorAll(".e-file-name")[0];
            filename.innerHTML = args.file.name.replace(document.querySelectorAll(".e-file-type")[0].innerHTML, '');
            filename.title = args.file.name;
        }
    }
</script>

Rename.cs

using System;
using System.IO;
using System.Web;
using System.Web.Mvc;

namespace RenameImage.Controllers
{
    public class HomeController : Controller
    {
        int x = 0;
        string imageFile;

        public ActionResult Index()
        {
            return View();
        }

        [AcceptVerbs("Post")]
        public void Rename(HttpPostedFileBase UploadFiles)
        {
            try
            {
                if (UploadFiles != null)
                {
                    imageFile = UploadFiles.FileName;

                    if (UploadFiles != null)
                    {
                        var fileSave = System.Web.HttpContext.Current.Server.MapPath("~/Uploads");

                        // Create a new directory, if it does not exists
                        if (!System.IO.Directory.Exists(fileSave))
                        {
                            System.IO.Directory.CreateDirectory(fileSave);
                        }

                        var fileName = Path.GetFileName(UploadFiles.FileName);
                        var fileSavePath = Path.Combine(fileSave, fileName);

                        // Rename a uploaded image file name
                        while (System.IO.File.Exists(fileSavePath))
                        {
                            imageFile = "rteImage" + x + "-" + fileName;
                            fileSavePath = Path.Combine(fileSave, imageFile);
                            x++;
                        }

                        if (!System.IO.File.Exists(fileSavePath))
                        {
                            UploadFiles.SaveAs(fileSavePath);

                            // Modified file name shared through response header by adding custom header
                            Response.Headers.Add("name", imageFile);
                            Response.StatusCode = 200;
                            Response.ContentType = "application/json; charset=utf-8";
                        }
                    }
                }
            }
            catch (Exception)
            {
                Response.StatusCode = 204;
            }
        }
    }
}