Upload, add and Display Image in TinyMCE Editor TextBox using jQuery Uploadify Plugin in ASP.Net
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.
Note
: For more details on implementing and using the jQuery Uploadify plugin, please refer
For more details on implementing and using the jQuery Uploadify plugin, please refer Implement Uploadify jQuery Plugin in ASP.Net using C# and VB.Net
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
