bjoerntx/test.html

## test.html
<!DOCTYPE html>
<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>
	<!DOCTYPE html>
	<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>