TinyMCE image upload on ASP.NET MVC

Index.cshtml

<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: 'textarea',
        images_upload_url: "TinyMceUpload",
    });

    function upload(form) {
        tinymce.activeEditor.uploadImages(function (success) {
            form.submit();
        });
        return false;
    }
</script>

<br/>
@using (Html.BeginForm("Index", "TinyMce", FormMethod.Post, new { onsubmit = "return upload(this);" }))
{
    <div class="form-group">
        <textarea name="data" rows="10">Press Ctrl+V to paste an image!</textarea>
    </div>
    <input class="btn btn-success" type="submit" value="Save" />
}

TinyMceController.cs

using System;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication.Controllers
{
    public class TinyMceController : Controller
    {
        // GET: TinyMce
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Index(string data)
        {
            var message = "Hello " + data;
            return Content(message);
        }

        [HttpPost]
        public ActionResult TinyMceUpload(HttpPostedFileBase file)
        {
            //Response.AppendHeader("Access-Control-Allow-Origin", "*");

            var location = SaveFile(Server.MapPath("~/uploads/"), file);

            return Json(new { location }, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// Saves the contents of an uploaded image file.
        /// </summary>
        /// <param name="targetFolder">Location where to save the image file.</param>
        /// <param name="file">The uploaded image file.</param>
        /// <exception cref="InvalidOperationException">Invalid MIME content type.</exception>
        /// <exception cref="InvalidOperationException">Invalid file extension.</exception>
        /// <exception cref="InvalidOperationException">File size limit exceeded.</exception>
        /// <returns>The relative path where the file is stored.</returns>
        private static string SaveFile(string targetFolder, HttpPostedFileBase file)
        {
            const int megabyte = 1024 * 1024;
            
            if (!file.ContentType.StartsWith("image/"))
            {
                throw new InvalidOperationException("Invalid MIME content type.");
            }

            var extension = Path.GetExtension(file.FileName.ToLowerInvariant());
            string[] extensions = { ".gif", ".jpg", ".png", ".svg", ".webp" };
            if (!extensions.Contains(extension))
            {
                throw new InvalidOperationException("Invalid file extension.");
            }
            
            if (file.ContentLength > (8 * megabyte))
            {
                throw new InvalidOperationException("File size limit exceeded.");
            }

            var fileName = Guid.NewGuid() + extension;
            var path = Path.Combine(targetFolder, fileName);
            file.SaveAs(path);

            return Path.Combine("/uploads", fileName).Replace('\\', '/');
        }
    }
}

So clear. Thanks.

Page reloads on upload but image is stored successfully, any help?

Thank you this is really helpful.

👍