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 ╰ TX Text Control .NET for Windows Forms
╰ TXTextControl Namespace
╰ ImageCollection Class
An instance of the ImageCollection class contains all images in a Text Control document or part of the document represented through objects of the type Image. provides methods to add images from Base64 data into the document. The following methods can be used to add images:

Method Description
addAnchored Inserts a new image which is anchored to the specified text position.
addAnchoredAtLocation Inserts a new image which is anchored to the specified text position.
addAtFixedPosition Inserts a new image which has a fixed geometrical position in the document.
addInline Inserts an image inline, which means that it is treated in the text like a single character.

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()
view raw index.cshtml hosted with ❤ by GitHub

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);
}
view raw tx.js hosted with ❤ by GitHub

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.

Adding local images