locked
Sample code TinyMce image upload RRS feed

  • Question

  • User-1320437544 posted

    Hello everyone,

    Would someone help me out with example of applying file upload in TinyMce with ashx handler?

    Thanks a lot.

    Monday, October 22, 2018 11:58 PM

Answers

  • User61956409 posted

    Hi Stoyan Bukovich,

    Would someone help me out with example of applying file upload in TinyMce with ashx handler?

    To enable user to upload image file and display it in TinyMCE editor, you can refer to the following code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey={your_api_key_here}"></script>
        <script>
            tinymce.init({
                selector: '#mytextarea',  // change this value according to your HTML
                plugins: 'image code',
                toolbar: 'undo redo | image code',
    
                images_upload_handler: function (blobInfo, success, failure) {
                    var xhr, formData;
    
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', 'FileUploadHandler.ashx');
    
                    xhr.onload = function () {
                        var json;
    
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
    
                        json = xhr.responseText;
    
                        success(json);
    
                    };
    
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
    
                    xhr.send(formData);
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <textarea id="mytextarea">Hello, World!</textarea>
            </div>
        </form>
    </body>
    </html>

    FileUploadHandler.ashx

    public class FileUploadHandler : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Expires = -1;
            try
            {
                HttpPostedFile postedFile = context.Request.Files["file"];
    
                string savepath = "";
                    
                savepath = context.Server.MapPath("Images");
                string filename = postedFile.FileName;
                if (!Directory.Exists(savepath))
                    Directory.CreateDirectory(savepath);
    
                postedFile.SaveAs(savepath + @"\" + filename);
    
    
                //your can put your code logic here
                //and return the remote location of the uploaded image as response
    
                context.Response.Write("Images/" + filename);
                context.Response.StatusCode = 200;
            }
            catch (Exception ex)
            {
                context.Response.Write("Error: " + ex.Message);
            }
    
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    Test Result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 23, 2018 5:30 AM

All replies

  • User61956409 posted

    Hi Stoyan Bukovich,

    Would someone help me out with example of applying file upload in TinyMce with ashx handler?

    To enable user to upload image file and display it in TinyMCE editor, you can refer to the following code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey={your_api_key_here}"></script>
        <script>
            tinymce.init({
                selector: '#mytextarea',  // change this value according to your HTML
                plugins: 'image code',
                toolbar: 'undo redo | image code',
    
                images_upload_handler: function (blobInfo, success, failure) {
                    var xhr, formData;
    
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', 'FileUploadHandler.ashx');
    
                    xhr.onload = function () {
                        var json;
    
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
    
                        json = xhr.responseText;
    
                        success(json);
    
                    };
    
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
    
                    xhr.send(formData);
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <textarea id="mytextarea">Hello, World!</textarea>
            </div>
        </form>
    </body>
    </html>

    FileUploadHandler.ashx

    public class FileUploadHandler : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Expires = -1;
            try
            {
                HttpPostedFile postedFile = context.Request.Files["file"];
    
                string savepath = "";
                    
                savepath = context.Server.MapPath("Images");
                string filename = postedFile.FileName;
                if (!Directory.Exists(savepath))
                    Directory.CreateDirectory(savepath);
    
                postedFile.SaveAs(savepath + @"\" + filename);
    
    
                //your can put your code logic here
                //and return the remote location of the uploaded image as response
    
                context.Response.Write("Images/" + filename);
                context.Response.StatusCode = 200;
            }
            catch (Exception ex)
            {
                context.Response.Write("Error: " + ex.Message);
            }
    
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    Test Result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 23, 2018 5:30 AM
  • User-1320437544 posted

    Simple and beautify. Thanks a lot.

    Tuesday, October 23, 2018 2:57 PM