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.
