HTML5: Loading Local Documents Using Pure Javascript
Web.TextControl supports loading local documents through pure JavaScript and the HTML5 File API. An HTML input element selects a file on the client, a FileReader converts it to a Base64-encoded string using readAsDataURL, and the loadDocument method loads it into the editor.

Web.TextControl provides a code-behind API to load and save documents from and to the server. Additionally, local files can be loaded using drag and drop on the control workspace.
Client-side, the Javascript API also provides a method to load local files:
TXTextControl.loadDocument(streamType, base64Data);
This sample shows how to open a local document with the HTML Input element and how to pass this document as a Base64 encoded string to the loadDocument method.
On selecting a new document in the Input element, the document is loaded into a FileReader that asynchronously reads the contents of files. The method readAsDataURL converts the document to a Base64 encoded string automatically. Based on the file extension, the required StreamType is recognized and finally loaded into TX Text Control.
// *****************************************************************
// readDocument
//
// Desc: This function reads a file, converts it to a Base64 encoded
// string and loads it into TX Text Control
//
// param input: The input HTML element
// *****************************************************************
function readDocument(input) {
if (input.files && input.files[0]) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
var streamType = TXTextControl.streamType.PlainText;
// set the StreamType based on the lower case extension
switch (fileinput.value.split('.').pop().toLowerCase()) {
case 'doc':
streamType = TXTextControl.streamType.MSWord;
break;
case 'docx':
streamType = TXTextControl.streamType.WordprocessingML;
break;
case 'rtf':
streamType = TXTextControl.streamType.RichTextFormat;
break;
case 'htm':
streamType = TXTextControl.streamType.HTMLFormat;
break;
case 'tx':
streamType = TXTextControl.streamType.InternalUnicodeFormat;
break;
case 'pdf':
streamType = TXTextControl.streamType.AdobePDF;
break;
}
// load the document beginning at the Base64 data (split at comma)
TXTextControl.loadDocument(streamType, e.target.result.split(',')[1]);
};
// read the file and convert it to Base64
fileReader.readAsDataURL(input.files[0]);
}
}
// call readDocument when a new document has been selected
$("#fileinput").change(function () {
readDocument(this);
});
Download the sample from GitHub and test it on your own.
![]()
Download and Fork This Sample on GitHub
We proudly host our sample code on github.com/TextControl.
Please fork and contribute.
Requirements for this sample
- Visual Studio 2012 or better
- TX Text Control .NET Server (trial sufficient)
Reporting
The Text Control Reporting Framework combines powerful reporting features with an easy-to-use, MS Word compatible word processor. Users can create documents and templates using ordinary Microsoft Word skills. The Reporting Framework is included in all .NET based TX Text Control products including ASP.NET, Windows Forms and WPF.
Related Posts
Creating Your First ASP.NET Reporting Application
The MailMerge and ServerTextControl components of TX Text Control .NET Server for ASP.NET enable server-side reporting in Web Forms. A template.docx merges with XML data via a button click…
Automatically Reconnect to the Server and Recover the Document
When a WebSocket connection drops, the TX Text Control editor automatically reconnects and recovers the document using browser local storage. The implementation saves document state client-side…
JavaScript API: Working with Merge Fields
The TX Text Control JavaScript API enables inserting, deleting, and manipulating merge fields in the HTML5-based document editor. Developers create MergeField objects, add them at specific…
Technology Preview: Embeddable HTML Widget to integrate Document Editing to…
TX Text Control offers a technology preview of an embeddable JavaScript widget that adds document editing to Angular, React, and other web frameworks. Developers add a script tag and create a…
Embedding TXTextControl.Web in non-.NET Framework applications like .NET…
The HTML5-based Web.TextControl editor can run inside an IFrame to embed it in non-.NET Framework applications such as .NET Core or AngularJS sites. The hosting page sends structured JSON commands…
