How to restrict image insertion to the RTE form the local machine only?
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.
