# X15: Inserting Client-Side Images using JavaScript > TX Text Control X15 adds JavaScript ImageCollection methods to insert client-side images into the HTML5-based ASP.NET editor. A local file is read and converted to a Base64 string, then placed inline at the cursor, anchored to a text position, or fixed at absolute page coordinates. - **Author:** Bjoern Meyer - **Published:** 2017-12-14 - **Modified:** 2026-07-17 - **Description:** TX Text Control X15 adds JavaScript ImageCollection methods to insert client-side images into the HTML5-based ASP.NET editor. A local file is read and converted to a Base64 string, then placed inline at the cursor, anchored to a text position, or fixed at absolute page coordinates. - **2 min read** (265 words) - **Tags:** - ASP.NET - HTML5 - Release - **Web URL:** https://www.textcontrol.com/blog/2017/12/14/inserting-client-side-images-using-javascript/ - **LLMs URL:** https://www.textcontrol.com/blog/2017/12/14/inserting-client-side-images-using-javascript/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2017/12/14/inserting-client-side-images-using-javascript/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/TextControl.Web.MVC.LocalImage --- 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 classprovides 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 @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. ![Adding local images](https://s1-www.textcontrol.com/assets/dist/blog/2017/12/14/a/assets/animation_images.webp "Adding local images") --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [X15: Adding MS Word Compatible Fields and Form Elements to TXTextControl.Web](https://www.textcontrol.com/blog/2017/12/20/using-ms-word-form-elements-in-txtextcontrol-web/llms.txt) - [TX Text Control 34.0 SP4 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/05/20/tx-text-control-34-0-sp4-is-now-available/llms.txt) - [TX Spell .NET 11.0 SP1 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/04/08/tx-spell-net-11-0-sp1-is-now-available/llms.txt) - [TX Text Control 34.0 SP2 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/02/18/tx-text-control-34-0-sp2-is-now-available/llms.txt) - [TX Text Control 34.0 SP1 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2025/12/03/tx-text-control-34-0-sp1-is-now-available/llms.txt) - [Introducing TX Text Control 34.0: Your Next Leap in Document Processing](https://www.textcontrol.com/blog/2025/11/10/introducing-tx-text-control-34-0-your-next-leap-in-document-processing/llms.txt) - [PDF/UA vs. PDF/A-3a: Which Format Should You Use for Your Business Application?](https://www.textcontrol.com/blog/2025/10/24/pdf-ua-vs-pdf-a-3a-which-format-should-you-use-for-your-business-application/llms.txt) - [Validating PDF/UA Documents in .NET C#](https://www.textcontrol.com/blog/2025/10/21/validating-pdf-ua-documents-in-dotnet-csharp/llms.txt) - [Sneak Peek: TX Text Control 34.0 Coming November 2025](https://www.textcontrol.com/blog/2025/10/02/sneak-peek-tx-text-control-34-0-coming-november-2025/llms.txt) - [TX Text Control 33.0 SP3 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2025/08/14/tx-text-control-33-0-sp3-is-now-available/llms.txt) - [High-Performance Text Replacement in Large DOCX Files using C# .NET](https://www.textcontrol.com/blog/2025/07/30/high-performance-text-replacement-in-large-docx-files-using-csharp-dotnet/llms.txt) - [Document Viewer 33.2.1 Released: New Event and Bug Fixes](https://www.textcontrol.com/blog/2025/07/30/document-viewer-33-2-1-released-new-event-and-bug-fixes/llms.txt) - [Upcoming Support for PDF/UA Compliance and Tagged PDF Generation in Version 34.0](https://www.textcontrol.com/blog/2025/07/24/upcoming-support-for-pdf-ua-compliance-and-tagged-pdf-generation-in-version-34-0/llms.txt) - [TX Text Control 33.0 SP2 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2025/06/18/tx-text-control-33-0-sp2-is-now-available/llms.txt) - [Service Pack Releases: What's New in TX Text Control 33.0 SP1 and 32.0 SP5](https://www.textcontrol.com/blog/2025/05/07/service-pack-releases-whats-new-in-tx-text-control-33-0-sp1-and-32-0-sp5/llms.txt) - [Introducing DS Server 4.0: Linux-Ready and Container-Friendly](https://www.textcontrol.com/blog/2025/04/30/introducing-ds-server-4-linux-ready-and-container-friendly/llms.txt) - [The Wait is Over: TX Text Control for Linux is Officially Here](https://www.textcontrol.com/blog/2025/03/12/the-wait-is-over-tx-text-control-for-linux-is-officially-here/llms.txt) - [Full .NET 9 Support in Text Control .NET Components for ASP.NET Core, Windows Forms, and WPF](https://www.textcontrol.com/blog/2024/11/11/full-net-9-support-in-text-control-net-components-for-asp-net-core-windows-forms-and-wpf/llms.txt) - [DS Server 3.5.0 Released](https://www.textcontrol.com/blog/2024/09/24/ds-server-3-5-0-released/llms.txt) - [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt) - [TX Text Control 32.0 Service Pack 4 Released](https://www.textcontrol.com/blog/2024/09/02/tx-text-control-32-0-service-pack-4-released/llms.txt) - [Service Pack 3: MailMerge Supports SVG Images](https://www.textcontrol.com/blog/2024/04/29/service-pack-3-mailmerge-supports-svg-images/llms.txt) - [TX Text Control 32.0 Service Pack 3 Released](https://www.textcontrol.com/blog/2024/04/29/tx-text-control-32-0-service-pack-3-released/llms.txt) - [Document Viewer: Long Polling Support for Loading Documents](https://www.textcontrol.com/blog/2024/04/25/document-viewer-long-polling-support-for-loading-documents/llms.txt) - [TX Text Control React Packages Released](https://www.textcontrol.com/blog/2024/02/29/tx-text-control-react-packages-released/llms.txt)