ASP.NET MVC TinyMCE And Uploadify Integration
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Haneef_Uploadify
packages
.gitattributes
.gitignore
Haneef_Uploadify.sln
Help.Txt
README.md

README.md

Integrating TinyMCE Rich text Editor with ASP.NET MVC with Image Upload Feature of Uploadify Jquery Plugin

Credits to Haneefputur.com

Step 1 : Download tinymce Editor from Extract the entire content into a folder called Tinymce Step 2 : Download Uploadify :: Extract the content to a folder called Uploadify and make sure it has following files

jquery.uploadify.js jquery.uploadify.min.js uploadify-cancel.png uploadify.css uploadify.swf

Step 3 : Create an Empty MVC project in Visual Studio 2013 Step 4 : Create a Model Called News.cs and add following


using System.ComponentModel.DataAnnotations; using System.Web; using System.Web.Mvc;

namespace Haneef_Uploadify.Models { public class News { [Key] public int NewsID { get; set; } public string Title { get; set; } [AllowHtml] public string Content { get; set; } public HttpPostedFileBase Image { get; set; } } }


Step 5 : Create a Controller and Name it as NewsController.cs and copy following Code


using System; using System.IO; using System.Web.Mvc; using Haneef_Uploadify.Models;

namespace Haneef_Uploadify.Controllers { public class NewsController : Controller {

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(News model)
        {
        return View("NewsDisplay", model);
        }
    public ActionResult Upload()
        {
        var file = Request.Files["Filedata"];
        string extension = Path.GetExtension(file.FileName);
        string fileid = Guid.NewGuid().ToString();
        fileid = Path.ChangeExtension(fileid, extension);

        string savePath = Server.MapPath(@"~\Uploads\" + fileid);
        file.SaveAs(savePath);

        return Content(Url.Content(@"~\Uploads\" + fileid));
        }
}

}


Step 6 : Create a folder called Uploads in the root of the project Copy the Folder Tinymce (from Step 1 ) into the Scripts folder Copy the Folder Uploadify (from Step 2) into the Scripts folder

Step 7: Create a view Under Folder News , Name it as Index.cshtml and copy following Contents.


@model Haneef_Uploadify.Models.News @{ ViewBag.Title = "Index"; }

<script src="~/Scripts/Uploadify/jquery.uploadify.min.js"></script> <script src="~/Scripts/Tinymce/tinymce.min.js"></script> <script> tinymce.init({ selector: '#Content', height: 500, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools' ], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons ', image_advtab: true, }); </script>
<script type="text/javascript">
    $(function () {
        
        $('#file_upload').uploadify({
     
            'swf': '/Scripts/Uploadify/uploadify.swf',
            'uploader': "@Url.Action("Upload", "News")",               
            'cancelImg': "@Url.Content("/Scripts/Uploadify/uploadify-cancel.png")",
            'fileSizeLimit': '1MB', // Add Kb, MB, GB
            'buttonText': 'Insert Images...', //Text for button
            'queueSizeLimit': 10, // Max number of files allowed
            'fileTypeDesc': 'Image Files',
            'fileTypeExts': '*.gif; *.jpg; *.png', // File type allowed
            'onUploadSuccess' : function(file, data, response) {
             tinyMCE.activeEditor.execCommand("mceInsertContent", true, "<img src='" + data + "' alt='Uploaded Image' class='img-responsive' />");
            }
       
        })
        
    }

); </script>

Add News
@using (Html.BeginForm("Index", "News", FormMethod.Post, new { enctype = "multipart/form-data" })) {
@Html.LabelFor(model => model.Title, new { @class = "col-lg-2 control-label" })
@Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
            <div class="form-group">
                @Html.LabelFor(model => model.Image, new { @class = "col-lg-2 control-label" })
                <div class="col-lg-9">
                    <input type="file" name="Img" id="file_upload" />
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Content, new { @class = "col-lg-2 control-label" })
                <div class="col-lg-9">
                    @Html.TextAreaFor(model => model.Content, new { @class = "form-control", @row = 5 })
                </div>
            </div>
   


                <div class="form-group">
                    <div class="col-lg-9"></div>
                    <div class="col-lg-3">
                        <button class="btn btn-success" id="btnSubmit" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        }
</div>
______________________________________________________________

Step 8 : Create a view under folder and name it as NewsDisplay.cshtml and copy following content ( This will be used to display the content if you submit the form)


@model Haneef_Uploadify.Models.News @{ ViewBag.Title = "News Display"; }

News Display - View The Submitted Content

Add News
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "col-lg-2 control-label" })
            <div class="col-lg-9">
                @Html.DisplayFor(model => model.Title, new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Content, new { @class = "col-lg-2 control-label" })
            <div class="col-lg-9">
                @Html.Raw(Model.Content)

            </div>
        </div>

    </div>

</div>

Step 9 : Fine tune Uploadify.css => Change the location of the uploadify-cancel.png reference in uploadify.css ( Arround Line Number 74) In my case it will look like this


.uploadify-queue-item .cancel a { background: url('/Scripts/Uploadify/uploadify-cancel.png') 0 0 no-repeat; float: right; height: 16px; text-indent: -9999px; width: 16px; }


Step 10 : Open Views => Shared => _Layout.cshtml file

Move the jquery bundle to header section ( this will prevent error throwing by TinyMCE as well Uploadify) In my case it will look as follows .


<title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap")
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
  • @Html.ActionLink("Home", "Index", "Home")
  • @Html.ActionLink("About", "About", "Home")
  • @Html.ActionLink("Index", "Index", "News")
  • @Html.ActionLink("Contact", "Contact", "Home")
@Html.Partial("_LoginPartial")
@RenderBody()

© @DateTime.Now.Year - My ASP.NET Application

@RenderSection("scripts", required: false)

Refer : http://haneefputtur.com/step-step-instruction-integrate-tinymce-uploadify-using-asp-net-mvc-c.html for deatils