In this article I will explain with an example, how to upload, add and display Image in TinyMCE Rich Text Editor TextBox using jQuery in ASP.Net MVC Razor.
The File will be uploaded with Progress Bar using HTML5 FormData, JSON and jQuery AJAX.
 
 
Namespaces
You will need to import the following namespace.
using System.IO;
 
 
Controller
The Controller consists of following 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, the uploaded File is read and saved to a Folder (Directory) on Server’s Disk.
Finally, the saved file path is returned back to the client using Content function.
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 ActionResult UploadFile()
    {
        //Fetch the Uploaded File.
        HttpPostedFileBase postedFile = Request.Files[0];
 
        //Set the Folder Path.
        string folderPath = Server.MapPath("~/Uploads/");
 
        //Set the File Name.
        string fileName = Path.GetFileName(postedFile.FileName);
 
        //Save the File in Folder.
        postedFile.SaveAs(folderPath + fileName);
 
        return Content("/Uploads/" + 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 Progress element, a TextArea, a Submit Button and a SPAN element.
The TinyMCE plugin has been applied to the TextArea by rendering the TinyMCE from its CDN
Inside the jQuery document ready event handler, the FileUpload has been assigned jQuery Change event
Inside Change event handler, the File is read from the HTML FileUpload element and is added to the HTML5 FormData object.
Then, an AJAX call is made to the Action method using jQuery and the File is uploaded using XmlHttpRequest (XHR).
Next, a Progress event handler is attached to the XmlHttpRequest (XHR), which displays the progress of the File being uploaded using the HTML5 Progress element.
Finally, the uploaded Image File is displayed in TinyMCE Rich Text Editor using the execCommand.
 
Submitting Form
When the submit button is clicked, the value of theRich 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="fuUpload" /><br />
        <progress id="fileProgress" style="display: none"></progress><br />
        @Html.TextArea("RichText")<br />
        <input type="submit" value="Submit" />
    }
    <hr/>
    <span>@Html.Raw(ViewBag.RichText)</span>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.0.20/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({ selector: 'textarea', width: 300 });
        $(function () {
            $("#fuUpload").change(function () {
                var formData = new FormData();
                formData.append("file", $("#fuUpload")[0].files[0]);
                $.ajax({
                    url: '/Home/UploadFile',
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (file) {
                        $("#fileProgress").hide();
                        var img = "<img style = 'height:80px;width:80px' src = '" + file + "' />";
                        tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
                    },
                    error: function (a) {
                        alert(a.responseText);
                    },
                    failure: function (a) {
                        alert(a.responseText);
                    },
                    xhr: function () {
                        var fileXhr = $.ajaxSettings.xhr();
                        if (fileXhr.upload) {
                            $("#fileProgress").show();
                            fileXhr.upload.addEventListener("progress", function (e) {
                                if (e.lengthComputable) {
                                    $("#fileProgress").attr({
                                        value: e.loaded,
                                        max: e.total
                                    });
                                }
                            }, false);
                        }
                        return fileXhr;
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Setting the maxRequestLength and maxAllowedContentLength settings in the Web.Config file
In the Web.Config file, the maxRequestLength and maxAllowedContentLength settings are set as shown below.
The maxRequestLength setting accepts value in KB and it is set to 1048576 KB i.e. 1 GB and the maxAllowedContentLength setting accepts value in Bytes and it is set to 1073741824 Bytes i.e. 1 GB.
<?xml version="1.0"?>
<configuration>
    <system.web>
        <!-- 1GB in kilobytes, default is 4096 KB or 4MB-->
        <httpRuntime maxRequestLength="1048576" />
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <!-- 1GB in Bytes, default is 30000000 or approx. 28.6102 MB-->
                <requestLimits maxAllowedContentLength="1073741824" />
            </requestFiltering>
        </security>
    </system.webServer>
</configuration>
 
 
Screenshot
ASP.Net MVC: Upload, Add and Display Image in TinyMCE Rich Text Editor using jQuery
 
 
Downloads
Download Code