We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to restrict image insertion to the RTE form the local machine only?

Platform: JavaScript |
Control: ejRTE |
Published Date: September 6, 2016 |
Last Revised Date: May 10, 2019

Description

In RTE, we have used FileBrowser and ImageBrowser controls to insert the files. In the FileBrowser and ImageBrowser, we need to upload the image in the server and then insert in the RTE.  In an alternative method, to insert the image from Local machine, we can achieve it by using UploadBox in the Custom tools.

 

Solution

At first, we need to define the custom tools in RTE, so that UploadBox can be initialized in that custom tool. Refer to the following code example.

Javascript

<script type="text/javascript" class="jsScript">

        var rteObj;

        var uploadObj;

        $(function () {

            $("#rteSample").ejRTE({

                toolsList: ["customTools"],

                width: "100%",

                minWidth: "150px",

                tools: {

                    customTools: [{

                        name: "InsertImage",

                        tooltip: "InsertImage ",

                        css: "InsertImage",

                        text: "InsertImage"

                      

                    }]

                }

            });

            rteObj = $("#rteSample").data("ejRTE");

        });

</script>

 

After this, we need to initialize the UploadBox control to the custom tools. Refer to the following code example.

Javascript

//Add text for custom tool bar element.

            $("div.InsertImage").html("").attr("id", "InsertImagee");

            $("#InsertImagee").ejUploadbox({

                saveUrl: "saveFiles.ashx",

                removeUrl: "removeFiles.ashx",

                complete: "success", dialogAction: { content: "body" }

            });

 

 

To upload the image, we need to write saveFiles.ashx handler, so that the file path can be returned from the handled, and the path is used to insert the image in the RTE. Refer to the following code example for saveFiles.ashx

C#

<%@ WebHandler Language="C#" Class="saveFiles" %>

 

using System;

using System.Web;

using System.IO;

using System.Collections.Generic;

 

public class saveFiles : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        string targetFolder = HttpContext.Current.Server.MapPath("uploadfiles");

        if (!Directory.Exists(targetFolder))

        {

            Directory.CreateDirectory(targetFolder);

        }

        HttpRequest request = context.Request;

        string requestPath = context.Request.UrlReferrer.AbsolutePath;

        HttpFileCollection uploadedFiles = context.Request.Files;

        if (uploadedFiles != null && uploadedFiles.Count > 0 && uploadedFiles[0].FileName!="")

        {

            for (int i = 0; i < uploadedFiles.Count; i++)

            {

                if (uploadedFiles[i].FileName != null && uploadedFiles[i].FileName != "")

                {

                    string fileName = uploadedFiles[i].FileName;

                    int indx = fileName.LastIndexOf("\\");

                    if (indx > -1)

                    {

                        fileName = fileName.Substring(indx + 1);

                    }

                    // uploadedFiles[i].SaveAs(targetFolder + "\\" + fileName);

                }

            }

            // only for Synchronous upload functionalities

            if (requestPath.Contains("synchronous.html") || requestPath.Contains("saveFiles.ashx"))

            {

                context.Response.Write("<span id='successmsg'> Successfully uploaded</span>");

                context.Response.WriteFile("synchronous.html");

            }

        }

        else

        {

            // only for Synchronous upload functionalities

            if (requestPath.Contains("synchronous.html") || requestPath.Contains("saveFiles.ashx"))

            {

                context.Response.Write("<span id='successmsg'> Select file to upload</span>");

                context.Response.WriteFile("synchronous.html");

            }

        }

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

 

Javascript

//args contains the location of the image.

function success(args) {

            var image = ej.buildTag("img#image");

            image.attr("src", args.responseText);

            rteObj.executeCommand("inserthtml", image[0].outerHTML);

            uploadObj = $("#InsertImagee").ejUploadbox("instance");

            uploadObj._dialogclose();

        }

 

Where success is the complete event of the UploadBox. In that event, we need to create image tag and append it in the RTE control using executeCommand method in RTE.

Uploadbox

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon