In this article I will explain with an example, how to upload, add and display Image in TinyMCE Rich Text Editor TextBox using jQuery Uploadify Plugin in ASP.Net MVC Razor.
The files uploaded using the jQuery Uploadify Plugin will be saved in a Folder (Directory) and will be displayed in the TinyMCE Rich Text Editor TextBox in ASP.Net MVC Razor.
 
 
Namespaces
You will need to import the following namespace.
using System.IO;
 
 
Controller
The Controller consists of three Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation
Inside this Action method, the submitted value of the TinyMCE RichTextBox is captured and then set into a ViewBag variable.
 
Action method for handling POST operation for File uploads
Inside this Action method, it accepts the parameter which is a collection of type HttpPostedFileBase.
Note: The name of the HttpPostedFileBase parameter must always be FileData as this variable name is used by jQuery Uploadify plugin.
 
A loop is executed over the HttpPostedFileBase collection and one by one each Image file is saved to the Directory (Folder).
Finally the Relative URL of the Image file is returned to the View. This URL will be used for displaying the uploaded Image file inside the TinyMCE Rich Text Editor TextBox.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    [ValidateInput(false)]
    public ActionResult Index(string richText)
    {
        ViewBag.RichText = richText;
        return View();
    }
 
    [HttpPost]
    public ContentResult Upload(List<HttpPostedFileBase> FileData)
    {
        string fileName = "";
        string path = "~/Uploads/";
        foreach (HttpPostedFileBase postedFile in FileData)
        {
            if (postedFile != null)
            {
                fileName = Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(Server.MapPath(path) + fileName);
            }
        }
 
        return Content(Url.Content(path + fileName));
    }
}
 
 

View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of an HTML FileUpload element, a TextArea and a Submit Button.
The files required by the jQuery Uploadify plugin are placed inside a folder named Uploadify within the project.
The jQuery Uploadify plugin is applied to the HTML FileUpload element.
The script property of the jQuery Uploadify plugin is set to the Upload Action method of the Home Controller.
The TinyMCE plugin has been applied to the HTML TextArea element.
After the Form is submitted, the submitted value of the TinyMCE Rich Text Editor TextBox is displayed using the ViewBag variable.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="file" id="postedFile" name="postedFile"/>
        @Html.TextArea("RichText")
        <br/>
        <input type="submit" value="Submit"/>
    }
    <hr/>
    <span>@Html.Raw(ViewBag.RichText)</span>
    <link rel="Stylesheet" type="text/css" href="../Uploadify/uploadify.css"/>
    <script type="text/javascript" src="../Uploadify/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../Uploadify/jquery.uploadify.js"></script>
    <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#postedFile").fileUpload({
                'uploader': '../Uploadify/uploader.swf',
                'cancelImg': '../Uploadify/cancel.png',
                'buttonText': 'Browse Files',
                'script': '/Home/Upload/',
                '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 = '" + response + "' />";
                    tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
                }
            });
            tinymce.init({ selector: 'textarea', width: 500 });
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net MVC: Upload, Add and Display Image in TinyMCE Rich Text Editor using jQuery
 
 
Downloads