# Loading Documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript

> This article shows how to load documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript. It shows how to create a storage container and how to download documents from this container.

- **Author:** Bjoern Meyer
- **Published:** 2024-04-08
- **Modified:** 2026-07-17
- **Description:** This article shows how to load documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript. It shows how to create a storage container and how to download documents from this container.
- **6 min read** (1021 words)
- **Tags:**
  - ASP.NET
  - ASP.NET Core
  - JavaScript
  - Azure
  - Blog Storage
- **Web URL:** https://www.textcontrol.com/blog/2024/04/08/loading-documents-from-azure-blob-storage-into-tx-text-control-document-editor-using-pure-javascript/
- **LLMs URL:** https://www.textcontrol.com/blog/2024/04/08/loading-documents-from-azure-blob-storage-into-tx-text-control-document-editor-using-pure-javascript/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/04/08/loading-documents-from-azure-blob-storage-into-tx-text-control-document-editor-using-pure-javascript/llms-full.txt

---

A typical scenario in modern cloud applications is loading and saving documents to and from Azure Blob Storage. [Azure Blob Storage](https://azure.microsoft.com/en-us/products/storage/blobs), provided by Microsoft Azure, is a cloud-centric object storage service designed for handling substantial volumes of unstructured data seamlessly. This solution empowers users to effortlessly store and access various forms of textual and binary data like images, videos, and documents within the cloud environment. Leveraging Azure Blob Storage offers benefits including scalability, security enhancements, and economical storage solutions.

TX Text Control Document Editor for Angular, React, and JavaScript provides a straightforward approach to integrate Azure Blob Storage into your application. This article demonstrates how to load documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript. It illustrates how to create a storage container and download documents from this container.

### Prerequisites

Before proceeding, ensure you have the following prerequisites:

- An Azure account. If you don't have one, you can [create a free account](https://azure.microsoft.com/en-us/free).
- An Azure Blob Storage account. If you don't have one, you can [create a storage account](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal).
- Trial Access Token for TX Text Control. If you don't have one, you can get a [free acceess token here](https://www.textcontrol.com/product/client-package/#access_token)

### Creating a Storage Container

Before loading documents from Azure Blob Storage, you need to create a storage container. A storage container is a logical unit for organizing and managing blobs in Azure Storage. To create a storage container, follow these steps:

1. Sign in to the [Azure portal](https://portal.azure.com).
2. In the Azure portal, select the storage account you want to use.
3. Click **Containers** and then click **+ Container**.
    
    ![Creating containers](https://s1-www.textcontrol.com/assets/dist/blog/2024/04/08/a/assets/azure1.webp "Creating containers")
4. Enter a name for the container and set the level of public access to *Private (no anonymous access)*.
5. Click **Create** to create the container.

#### Uploading Documents to the Storage Container

After creating the storage container, you can upload documents to the container. To upload documents, follow these steps:

1. In the Azure portal, select the storage account you want to use.
2. Click **Containers** and then click the container you created.
3. Click **Upload** and select the document (DOC, DOCX, TX) you want to upload.
4. Click the **Upload** button to upload the document to the container.
5. Repeat the process to upload additional documents.

#### Creating a Shared Access Signature (SAS) Token

After uploading documents to the storage container, you need to create a Shared Access Signature (SAS) token to access the documents. A SAS token is a URI that grants restricted access rights to Azure Storage resources. To create a SAS token, follow these steps:

1. In the Azure portal, select the created container.
2. Click **Shared access tokens** to create a new token.
3. Select *Account Key* as the *Signing method*.
4. Choose the permissions *Read*, *List*, and *Immutable Storage* for the SAS token.
5. Set the start and expiry date for the SAS token.
6. Click **Generate SAS andURL** to create the SAS token.
    
    ![Creating SAS token](https://s1-www.textcontrol.com/assets/dist/blog/2024/04/08/a/assets/azure2.webp "Creating SAS token")
7. Copy the generated SAS token to access the documents.

### Loading Documents from Azure Blob Storage

After creating the storage container and uploading documents, you can load documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript.

#### Creating a Document Editor Application

1. Create a new HTML file and add the following code:
    
    ```
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Text Control JavaScript Demo</title>
    
        <script src="https://backend.textcontrol.com/api/TXWebSocket/GetResource?name=tx-document-editor.min.js"></script>
    
        <style>
          #txDocumentEditor {
            height: 800px;
            width: 800px;
          }
        </style>
    </head>
    <body>
    
        <div id="txDocumentEditor"></div>
    
        <select id="fileSelect" onchange="loadDocumentFromAzureBlob(this.value)">
            <option value="">Select a document</option>
        </select>
      
        <script>
            
            const textControlAccessToken = "";
            const storageAccount = "";
            const containerName = "";
            const sasToken = "";
            
            TXTextControl.init({
                containerID: "txDocumentEditor",
                webSocketURL: "wss://backend.textcontrol.com/api/TXWebSocket?access-token=" + textControlAccessToken,
            });
    
            TXTextControl.addEventListener("textControlLoaded", function () {
                listDocumentsFromAzureBlob();
            });
    
            function listDocumentsFromAzureBlob() {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", `${storageAccount}/${containerName}?restype=container&comp=list&${sasToken}`);
    
                xhr.onload = function () {
                    if (this.status === 200) {
                        var xmlRespsone = this.responseText;
                        var parser = new DOMParser();
                        var xmlDoc = parser.parseFromString(xmlRespsone, "text/xml");
                        var blobs = xmlDoc.getElementsByTagName("Blob");
    
                        for (var i = 0; i < blobs.length; i++) {
                            var blobName = blobs[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
                            var option = document.createElement("option");
                            option.value = blobName;
                            option.text = blobName;
                            document.querySelector("#fileSelect").appendChild(option);
                        }
    
                    }
                };
                xhr.send();
            }
    
            function loadDocumentFromAzureBlob(blobName) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", `${storageAccount}/${containerName}/${blobName}?${sasToken}`);
                xhr.responseType = "arraybuffer";
    
                xhr.onload = function () {
                    if (this.status === 200) {
                        var blob = new Blob([this.response], { type: "application/octet-stream" });
                        var reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onloadend = function () {
                            var base64data = reader.result;
    
                            switch (blobName.split('.').pop()) {
                                case "docx":
                                    TXTextControl.loadDocument(TXTextControl.StreamType.WordprocessingML, base64data.split(',')[1]);
                                    break;
                                case "doc":
                                    TXTextControl.loadDocument(TXTextControl.StreamType.MSWord, base64data.split(',')[1]);
                                    break;
                                case "rtf":
                                    TXTextControl.loadDocument(TXTextControl.StreamType.RichTextFormat, base64data.split(',')[1]);
                                    break;
                                case "tx":
                                    TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat, base64data.split(',')[1]);
                                    break;
                                default:
                                    alert("Unsupported file format");
                                    break;
                            }
                        }
                    }
                };
                xhr.send();
            }
    
        </script>
        
    </body>
    </html>
    ```
2. Replace the **textControlAccessToken** constant with your TX Text Control trial access token.
3. Replace **storageAccount** with the URL of your Azure Blob Storage container (e.g., *https://myaccount.blob.core.windows.net*).
4. Replace **containerName** with the name of your storage container.
5. Replace **sasToken** with the SAS token you generated.
6. Save the file and open it in a web browser.

After following these steps, you will have a document editor application that loads documents from Azure Blob Storage using pure JavaScript.

![Creating SAS token](https://s1-www.textcontrol.com/assets/dist/blog/2024/04/08/a/assets/azure3.webp "Creating SAS token")

The *listDocumentsFromAzureBlob* method gets all available documents from the container you created. The *loadDocumentFromAzureBlob* method downloads the document from the Azure Blob Storage and loads it into the Document Editor using the *loadDocument* method.

#### Conclusion

This article demonstrated how to load documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript. It showed how to create a storage container, upload documents to the container, and generate a Shared Access Signature (SAS) token to access the documents. By following these steps, you can seamlessly integrate Azure Blob Storage into your application and load documents into the Document Editor.

---

## 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

- [Deploying the TX Text Control Document Editor from the Private NuGet Feed to Azure App Services (Linux and Windows)](https://www.textcontrol.com/blog/2026/03/25/deploying-the-tx-text-control-document-editor-from-the-private-nuget-feed-to-azure-app-services-linux-and-windows/llms.txt)
- [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt)
- [5 Document Workflows You Can Automate With JavaScript Rich Text Editor](https://www.textcontrol.com/blog/2026/01/14/five-document-workflows-you-can-automate-with-javascript-rich-text-editor/llms.txt)
- [Add JavaScript to PDFs with TX Text Control in C# .NET: Time-Based Alerts Made Easy](https://www.textcontrol.com/blog/2025/06/13/add-javascript-to-pdfs-with-tx-text-control-in-c-dot-net-time-based-alerts-made-easy/llms.txt)
- [Deploying the TX Text Control Document Editor in an ASP.NET Core Web App to Azure App Services](https://www.textcontrol.com/blog/2025/03/26/deploying-the-tx-text-control-document-editor-in-an-asp-net-core-web-app-to-azure-app-services/llms.txt)
- [Why an Unlimited Runtime License (OEM) for TX Text Control is Perfect for Cloud Deployments](https://www.textcontrol.com/blog/2025/01/08/why-an-unlimited-runtime-license-oem-for-tx-text-control-is-perfect-for-cloud-deployments/llms.txt)
- [Sign PDF Documents with PFX Certificates from Azure Key Vault in .NET C#](https://www.textcontrol.com/blog/2025/01/07/sign-pdf-documents-with-pfx-certificates-from-azure-key-vault-in-net-c-sharp/llms.txt)
- [TX Text Control for Linux Preview: Document Processing in ASP.NET Core on Azure App Services](https://www.textcontrol.com/blog/2024/12/17/tx-text-control-for-linux-preview-document-processing-in-asp-net-core-on-azure-app-services/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Updating SubTextParts using JavaScript Promises](https://www.textcontrol.com/blog/2022/12/23/updating-subtextparts-using-javascript-promises/llms.txt)
- [MailMerge: Working with Image Placeholders](https://www.textcontrol.com/blog/2022/12/22/mailmerge-working-with-image-placeholders/llms.txt)
- [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt)