In this article I will explain with an example, how to upload and display Image in TinyMCE Editor TextBox using jQuery in ASP.Net.
The Image files will be uploaded in the TinyMCE Editor TextBox using AJAX with the help of jQuery Uploadify plugin.
HTML Markup
Following HTML Markup consists of an ASP.Net FileUpload and a Multi-line TextBox.
<form id="form1" runat="server">
<div style="padding: 40px">
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
</div>
</form>
Implementing TinyMCE And Uploadify Plugin
Inside the jQuery document ready event handler, the FileUpload control has been applied with the jQuery Uploadify plugin and the Multi-line TextBox has been assigned with the TinyMCE Rich Text Editor plugin.
The OnComplete event handler of the jQuery Uploadify plugin is raised when the file upload process has been completed and hence inside the OnComplete event handler, a string of HTML Image with the SRC attribute set to the path of the uploaded Image file is generated.
Finally the generated HTML Image string is inserted in the TinyMCE Editor.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function () {
$('textarea').tinymce({
script_url: 'jscripts/tiny_mce/tiny_mce.js',
theme: "advanced",
plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,spellchecker",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
height: 200,
skin: "o2k7",
skin_variant: "silver"
});
$("[id*=FileUpload1]").fileUpload({
'uploader': 'scripts/uploader.swf',
'cancelImg': 'images/cancel.png',
'buttonText': 'Browse Files',
'script': 'Upload.ashx',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'onComplete': function (event, ID, fileObj, response, data) {
var img = "<img style = 'height:80px;width:80px' src = '" + fileObj.filePath + "' />";
tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
});
});
</script>
Generic Handler for uploading Image files
The following Generic HTTP Handler handles the File Upload requests sent from the jQuery Uploadify Plugin.
It first reads the File data and then saves is to a Folder (Directory) on the Server’s disk.
Finally it sends a StatusCode 200 in Response which signifies that the File has been successfully uploaded.
C#
<%@ WebHandler Language="C#" Class="Upload" %>
using System;
using System.Web;
using System.IO;
public class Upload : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Expires = -1;
try
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
string savepath = "";
string tempPath = "";
tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
savepath = context.Server.MapPath(tempPath);
string filename = postedFile.FileName;
if (!Directory.Exists(savepath))
Directory.CreateDirectory(savepath);
postedFile.SaveAs(savepath + @"\" + filename);
context.Response.Write(tempPath + "/" + filename);
context.Response.StatusCode = 200;
}
catch (Exception ex)
{
context.Response.Write("Error: " + ex.Message);
}
}
public bool IsReusable {
get {
return false;
}
}
}
VB.Net
<%@ WebHandler Language="VB" Class="Upload" %>
Imports System
Imports System.Web
Imports System.IO
Public Class Upload : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
context.Response.Expires = -1
Try
Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")
Dim savepath As String = ""
Dim tempPath As String = ""
tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
savepath = context.Server.MapPath(tempPath)
Dim filename As String = postedFile.FileName
If Not Directory.Exists(savepath) Then
Directory.CreateDirectory(savepath)
End If
postedFile.SaveAs((savepath + ("\" + filename)))
context.Response.Write((tempPath + ("/" + filename)))
context.Response.StatusCode = 200
Catch ex As Exception
context.Response.Write("Error: " + ex.Message)
End Try
End Sub
Public ReadOnly Property IsReusable As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Demo
Downloads
