Manage File Attachments in ASP.NET Core Rich Text Editor

The Rich Text Editor allows you to attach a file using the file upload. You can attach files using the upload dialog or by drag-and-drop from your local file system. When the file upload succeeds, an attachment link is inserted in the content.

In the sample below, the saveUrl and path properties are configured to enable file attachments.

    1. saveUrl: Provides service URL to save the files.
    2. path: Specifies the location to store the image.

The following sample illustrates how to attach a file in the Rich Text Editor.

CSHTML

@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("[SERVICE_HOSTED_PATH]/api/uploadbox/Save")};
}

<ejs-richtexteditor id="editor" imageUploadSuccess="onImageUploadSuccess" created="created">
    <e-richtexteditor-insertimagesettings saveUrl="[SERVICE_HOSTED_PATH]/api/uploadbox/Save" path="../Files/"></e-richtexteditor-insertimagesettings>
    <e-content-template>
        <p>
            The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
        <p><b> Key features:</b></p>

        <ul>
            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>

            <li><p> Capable of handling markdown editing.</p></li>

            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>

            <li><p> Provides a fully customizable toolbar.</p></li>

            <li><p> Provides HTML view to edit the source directly for developers.</p></li>

            <li><p> Supports third - party library integration.</p></li>

            <li><p> Allows preview of modified content before saving it.</p></li>

            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>

            <li><p> Contains undo / redo manager.</p></li>

            <li><p> Creates bulleted and numbered lists.</p></li>

        </ul>
    </e-content-template>
</ejs-richtexteditor>
<ejs-uploader id="UploadFiles" success="onImageUploadSuccess" dropArea=".e-richtexteditor" asyncSettings="@asyncSettings"></ejs-uploader>
<script>
    var rteObj;
    var selection = new ej.richtexteditor.NodeSelection();
    var range;
    let saveSelection;
    function created() {
        rteObj = this;
    }
    function onImageUploadSuccess(e) {
        rteObj.contentModule.getEditPanel().focus();
        range = selection.getRange(document);
        saveSelection = selection.save(range, document);
        var fileUrl = document.URL + rteObj.insertImageSettings.path + e.file.name;
        if (rteObj.formatter.getUndoRedoStack().length === 0) {
            rteObj.formatter.saveData();
        }
        saveSelection.restore();
        rteObj.executeCommand('createLink', { url: fileUrl, text: fileUrl, selection: saveSelection });
        rteObj.formatter.saveData();
        rteObj.formatter.enableUndo(rteObj);
        this.clearAll();
    
    }
</script>

Controller.cs

public class HomeController : Controller
{

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

To config server-side handler, refer the below code.

int x = 0;
string file;
 [AcceptVerbs("Post")]
        public void Save()
        {
            try
            {
                var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"];
                file = httpPostedFile.FileName;
                if (httpPostedFile != null)
                {
                    Console.WriteLine(System.Web.HttpContext.Current.Server.MapPath("~/Files"));
                    var fileSave = System.Web.HttpContext.Current.Server.MapPath("~/Files");
                    if (!Directory.Exists(fileSave))
                    {
                        Directory.CreateDirectory(fileSave);
                    }
                    var fileName = Path.GetFileName(httpPostedFile.FileName);
                    var fileSavePath = Path.Combine(fileSave, fileName);
                    while (System.IO.File.Exists(fileSavePath))
                    {
                        file = "rte" + x + "-" + fileName;
                        fileSavePath = Path.Combine(fileSave, file);
                        x++;
                    }
                    if (!System.IO.File.Exists(fileSavePath))
                    {
                        httpPostedFile.SaveAs(fileSavePath);
                        HttpResponse Response = System.Web.HttpContext.Current.Response;
                        Response.Clear();
                        Response.Headers.Add("name", file);
                        Response.ContentType = "application/json; charset=utf-8";
                        Response.StatusDescription = "File uploaded succesfully";
                        Response.Headers.Add("url", fileSavePath);
                        Response.End();
                    }
                }
            }
            catch (Exception e)
            {
                HttpResponse Response = System.Web.HttpContext.Current.Response;
                Response.Clear();
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusCode = 204;
                Response.Status = "204 No Content";
                Response.StatusDescription = e.Message;
                Response.End();
            }
        }