HTML5: Loading Local Documents Using Pure Javascript
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: 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…

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
This tutorial shows how to use the MailMerge component in an ASP.NET Web application to merge a template with data to create an Adobe PDF document.
Automatically Reconnect to the Server and Recover the Document
We just published a sample project that shows how to reconnect to the server and how to recover the current document.
JavaScript API: Working with Merge Fields
This article gives an overview of how to add, remove and manipulate merge fields programmatically using the JavaScript API.
Technology Preview: Embeddable HTML Widget to integrate Document Editing to…
This technology preview shows an early version of an HTML widget that can be embedded into any HTML page.
Embedding TXTextControl.Web in non-.NET Framework applications like .NET…
This article shows how to embed the ASP.NET MVC component TXTextControl.Web into non-.NET Framework applications.