Rename uploaded images in server before inserting it in the Rich Text Editor

21 Dec 20227 minutes to read

By using the InsertImageSettings property, you can specify the server handler to upload the selected image. Then you can bind the ImageUploadSuccess event, to receive the modified file name from the server and update it in the Rich Text Editor’s insert image dialog.

Refer rename.cs controller file for configure the server-side.

NOTE

The 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;
            }
        }
    }
}