Editor Enable Upload of Images From File System

Environment

Product	Progress® Kendo UI® Editor for jQuery
Product Version	2021.2.616
Browser	Review browser support

Description

How can I create a simpler Image Insert Tool that enables me to upload from my file system?

Solution

Create a custom tool

1. Create the custom tool
2. Define its tool.exec function
3. In the exec function create a file input element, click it programmatically and subscribe to its change event
4. (Optional) Use CSS to style the custom Insert Image From File System tool with the desired Kendo Icon

Handle the change event of the file input

1. If there are files in the input create a new FileReader
2. Subscribe to its onload event
3. Read the contents of the file with the FileReader.readAsDataURL() This also triggers the onload event.
4. Get ready to remove the file input to prevent memory leaks

Handle the onload event of the FileReader

1. Get the Editor's data
2. Get the Base64-encoded data of the image from the content of the event
3. Create a new img element and set the image data as its source
4. Use the Editor's paste method to insert the img element into its editable area
5. Remove the event handler from the file input element and then delete it from the DOM

<div id="example">


    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">

    </textarea>

</div>
<script>
        $("#editor").kendoEditor({
            tools: [
                "bold",
              "insertImage",
                {
                    name: "myInsertImage",
                    tooltip: "Insert an image",
                    exec: function(e) {



                        var uploadInput = $("<input type='file' />");
                        uploadInput.click();
                        uploadInput.on("change", uploadInputChange);


                    }
                }
            ]
        });

        function uploadInputChange (ev) {
          if (this.files && this.files[0]) {
            var reader = new FileReader();

            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
            window.UPLOAD_TO_DESTROY = this;
          }
        }

        function imageIsLoaded (ev) {
          var editor = $("#editor").data("kendoEditor");
          var base64Src = ev.target.result;
          var img = $("<img src='" + base64Src + "' />")[0];

          editor.paste(img.outerHTML);
          img.remove();

          if (UPLOAD_TO_DESTROY) {
            $(UPLOAD_TO_DESTROY).off("change");
            $(UPLOAD_TO_DESTROY).remove();
            delete UPLOAD_TO_DESTROY;
          }
        }
    </script>
    <style>
        .k-i-my-insert-image:before {
        content: "\E501"
        }
    </style>

Notes

This article displays a general approach for adding an image from the user's file system in the Editor. There are further aspects of this functionality to be handled like validation of files, security issues, etc.

See Also

How to make a simple image upload using Javascript/Html StackOverflow article