Search results

Rename images before inserting it in Rich Text Editor in ASP.NET Core RichTextEditor control

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 controller file for configure the server-side.

Note: The runnable demo application is available in this Github repository.

tagHelper
controller.cs
<ejs-richtexteditor id="editor" imageUploadSuccess="onImageUploadSuccess">
    <e-richtexteditor-insertimagesettings saveUrl="/Home/Rename" path="./Uploads/"></e-richtexteditor-insertimagesettings>
</ejs-richtexteditor>

<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>
using System;
using System.IO;
using System.Diagnostics;
using System.Net.Http.Headers;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using System.Collections.Generic;
using Microsoft.AspNetCore.Hosting;
using RenameImage.Models;

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

        public IActionResult Index()
        {
            return View();
        }
        
        public HomeController(IHostingEnvironment env)
        {
            hostingEnv = env;
        }

        [HttpPost]
        public void Rename(IList<IFormFile> UploadFiles)
        {
            try
            {
                foreach (IFormFile file in UploadFiles)
                {
                    if (UploadFiles != null)
                    {
                        string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                        imageFile = filename;
                        string path = hostingEnv.WebRootPath + "\\Uploads" + $@"\{filename}";

                        // Create a new directory, if it does not exists
                        if (!Directory.Exists(hostingEnv.WebRootPath + "\\Uploads"))
                        {
                            Directory.CreateDirectory(hostingEnv.WebRootPath + "\\Uploads");
                        }

                        // Rename a uploaded image file name
                        while (System.IO.File.Exists(path))
                        {
                            imageFile = "rteImage" + x + "-" + filename;
                            path = hostingEnv.WebRootPath + "\\Uploads" + $@"\rteImage{x}-{filename}";
                            x++;
                        }

                        if (!System.IO.File.Exists(path))
                        {
                            using (FileStream fs = System.IO.File.Create(path))
                            {
                                file.CopyTo(fs);
                                fs.Flush();
                                fs.Close();
                            }

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

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}