# 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.
- **Author:** Bjoern Meyer
- **Published:** 2015-09-01
- **Modified:** 2026-03-05
- **Description:** 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.
- **2 min read** (304 words)
- **Tags:**
- HTML5
- Reporting
- **Web URL:** https://www.textcontrol.com/blog/2015/09/01/html5-loading-local-documents-using-pure-javascript/
- **LLMs URL:** https://www.textcontrol.com/blog/2015/09/01/html5-loading-local-documents-using-pure-javascript/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2015/09/01/html5-loading-local-documents-using-pure-javascript/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/TextControl.Web.FileUpload
---
[Web.TextControl](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.txtextcontrol.web.textcontrol.class.htm) 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.
---
## 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
- [Creating Your First ASP.NET Reporting Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-aspnet-reporting-application/llms.txt)
- [Automatically Reconnect to the Server and Recover the Document](https://www.textcontrol.com/blog/2019/09/05/automatically-reconnect-to-the-server-and-recover-the-document/llms.txt)
- [JavaScript API: Working with Merge Fields](https://www.textcontrol.com/blog/2018/03/05/javascript-api-working-with-merge-fields/llms.txt)
- [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt)
- [Embedding TXTextControl.Web in non-.NET Framework applications like .NET Core and AngularJS](https://www.textcontrol.com/blog/2017/10/23/embedding-txtextcontrol/llms.txt)
- [Sneak Peek X15: Custom Field Overlays in HTML5-based Text Control](https://www.textcontrol.com/blog/2017/06/21/sneak-peek-x15-custom-field-overlays-in-html5-based-text-control/llms.txt)
- [New ASP.NET MVC DocumentViewer Rolled out to the ReportingCloud Portal](https://www.textcontrol.com/blog/2017/04/22/new-aspnet-mvc-documentviewer-rolled-out-to-the-reportingcloud-portal/llms.txt)
- [Updated MVC Sample: Loading Files from the Backstage Menu](https://www.textcontrol.com/blog/2017/04/20/updated-mvc-sample-loading-files-from-the-backstage-menu/llms.txt)
- [ASP.NET MVC: Implementing a Simplistic, Custom Button Bar](https://www.textcontrol.com/blog/2017/03/13/aspnet-mvc-implementing-a-simplistic-custom-button-bar/llms.txt)
- [ASP.NET MVC: Adding Protected Sections to Documents](https://www.textcontrol.com/blog/2017/03/01/aspnet-mvc-adding-protected-sections-to-documents/llms.txt)
- [ASP.NET: Adding Electronic Signatures to Documents](https://www.textcontrol.com/blog/2016/10/12/aspnet-adding-electronic-signatures-to-documents/llms.txt)
- [Setting the Interface and Control's Culture of Web.TextControl](https://www.textcontrol.com/blog/2015/12/16/setting-the-interface-and-controls-culture-of-webtextcontrol/llms.txt)
- [X13: Using IMEs and Localization in Web.TextControl](https://www.textcontrol.com/blog/2015/11/20/x13-using-imes-and-localization-in-webtextcontrol/llms.txt)
- [X13: New Web Forms DocumentViewer Style](https://www.textcontrol.com/blog/2015/11/19/x13-new-web-forms-documentviewer-style/llms.txt)
- [Sneak Peek X13: New Features in Web.TextControl](https://www.textcontrol.com/blog/2015/11/18/sneak-peek-x13-new-features-in-webtextcontrol/llms.txt)
- [HTML5: Display and Handle FormCheckBox Fields](https://www.textcontrol.com/blog/2015/09/22/html5-display-and-handle-formcheckbox-fields/llms.txt)
- [HTML5: Loading Local Documents - Part 2](https://www.textcontrol.com/blog/2015/09/04/html5-loading-local-documents-part-2/llms.txt)
- [Web.TextControl: Can't Connect to the Server?](https://www.textcontrol.com/blog/2015/09/03/webtextcontrol-cant-connect-to-the-server/llms.txt)
- [MailMerge: MergeFields with CRLFs](https://www.textcontrol.com/blog/2015/09/02/mailmerge-mergefields-with-crlfs/llms.txt)
- [Create Database Excerpt Files from Assemblies](https://www.textcontrol.com/blog/2015/08/25/create-database-excerpt-files-from-assemblies/llms.txt)
- [New Text Control Reporting Online Demo Launched](https://www.textcontrol.com/blog/2015/08/20/new-text-control-reporting-online-demo-launched/llms.txt)
- [New HTML5 Reporting Demo Website Online](https://www.textcontrol.com/blog/2015/08/18/new-html5-reporting-demo-website-online/llms.txt)
- [TextControl.Web: Custom Mail Merge Preview](https://www.textcontrol.com/blog/2015/08/14/textcontrolweb-custom-mail-merge-preview/llms.txt)
- [Web.TextControl Successfully Tested in Project Spartan](https://www.textcontrol.com/blog/2015/04/02/webtextcontrol-successfully-tested-in-project-spartan/llms.txt)
- [Web.TextControl X12: Fully Programmable API](https://www.textcontrol.com/blog/2015/03/09/webtextcontrol-x12-fully-programmable-api/llms.txt)