How to upload and inject image to tinymce 4 using Asp.net MVC

Ok, Micro$oft or someone else needs to really do something about this, in the mean time here is the result of hours of debugging:

This solution uses direct upload function (already there in Tinymce but disabled by default) and with some jquery hack we inject the image into textarea.

Changing dimensions must be done after injecting the image. In the recent versions of Tinymce they also added some nice image editing tools that also work with this method.

Now the code:

This is the action that needs to be placed in a controller: (Mind the routing)

public string Upload(HttpPostedFileBase file)
    {
        string path;
        string saveloc = "~/Images/";
        string relativeloc = "/Images/";
        string filename = file.FileName;

        if (file != null && file.ContentLength > 0 && file.IsImage())
        {
            try
            {
                path = Path.Combine(HttpContext.Server.MapPath(saveloc), Path.GetFileName(filename));
                file.SaveAs(path);
            }
            catch (Exception e)
            {
                return "<script>alert('Failed: " + e + "');</script>";
            }
        }
        else
        {
            return "<script>alert('Failed: Unkown Error. This form only accepts valid images.');</script>";
        }

        return "<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('" + relativeloc + filename + "').closest('.mce-window').find('.mce-primary').click();</script>";
    }

And this is the complete code for Tinymce, it will generate a text box and a couple of hidden fields. It will also make an instance of tinymce with some plugins enabled.

    <iframe id="form_target" name="form_target" style="display:none"></iframe>

<form id="my_form" action="/admin" target="form_target" method="post" enctype="multipart/form-data" style="width:0;height:0;overflow:hidden">
    <input name="file" type="file" onchange="$('#my_form').submit();this.value='';">
</form>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    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 | ltr rtl",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ],
    file_browser_callback: function(field_name, url, type, win) {
    if(type=='image') $('#my_form input').click();
}
});
</script>

<textarea id="my_editor" class="mceEditor">This will be an editor.</textarea>

You need to make a folder named "Images" in your project root for uploading images. You also need Tinymce js file and jquery.

Change the action of the form according to your setup!!!

You may also choose to use html helpers. I don't like them. but go ahead and use those instead of this handmade form if you like.

The idea is from here but it was done in python so I rewrote it to work with ASP.NET MVC5 and Latest version of TinyMCE.

I will keep working on this in the next few days and will edit this answer if necessary.

I did this in TinyMCE 4.3.10

In tinymce.init, put these options:

paste_data_images: true,
images_upload_url: '/YourController/UploadImage',
images_upload_base_path: '/some/basepath'

In CSharp code:

public ActionResult UploadImage(HttpPostedFileBase file)
{
    file.SaveAs("<give it a name>");
    return Json(new { location = "<url to that file>" });
}

You should be able to copy and paste image to your textarea (strange, drag and drop doesn't work anymore).