Using JavaScript API enhancements, client-side images can be added to documents. All supported image types can be added as Base64 encoded strings and inserted at character position, anchored to paragraphs or fixed on pages.

The TXTextControl.ImageCollection class provides methods to add images from Base64 data into the document. The following methods can be used to add images:

Consider the following ASP.NET MVC view that consists of a simple HTML file input element and a TextControl:

@using TXTextControl.Web.MVC
@using TXTextControl.Web

<input type="file" id="file" name="file" enctype="multipart/form-data" />

@Html.TXTextControl().TextControl(settings =>
{
    
}).Render()

The following JavaScript code reads the content of an opened local image, converts it to a Base64 encoded string and finally adds the image to the document:

document.getElementById('file').addEventListener('change', readFile, false);

function readFile(evt) {
    var files = evt.target.files;
    var file = files[0];
    var reader = new FileReader();

    reader.onload = function (event) {
        var binaryString =  btoa(event.target.result);
        TXTextControl.images.addInline(binaryString, -1);
    }

    reader.readAsBinaryString(file);
}

In the following sample, that can be downloaded directly from our GitHub account, an additional ribbon menu item is added that opens a dialog box to add local images.