Uploading a new certificate

A new certificate can be sent to the HMI via WebSocket. To do this, encode the new certificate in Base64 and send it to the corresponding symbol.

Example of uploading a certificate from an HTML host control:

In this example, a certificate can be selected using the input field. This will be opened and its contents encoded using Base64. Then, the encoded string is sent to the corresponding certificate symbol on the server, where it overwrites the old one.

<div id="TcHmiHtmlHost_1" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-height="300"
    data-tchmi-height-unit="px" data-tchmi-left="20" data-tchmi-left-unit="px" data-tchmi-top="87"
    data-tchmi-top-unit="px" data-tchmi-width="300" data-tchmi-width-unit="px">
    <input type="file" class="inputNewCertificate" accept=".pem, .pfx, .cer, .crt">
    <script>
        const fileInput = document.querySelector('.inputNewCertificate');

        fileInput.addEventListener('change', () => {
            // Stop early if the user did not select a file.
            if (!fileInput.files || fileInput.files.length === 0) {
                console.log('No file was selected.');
                return;
            }

            // Read the selected file as plain text.
            const selectedFile = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = () => {
                // The file content is available in reader.result once loading is complete.
                const fileContent = String(reader.result ?? '');

                // Convert the text content to Base64 before writing it to the PLC symbol.
                const base64Content = btoa(fileContent);

                TcHmi.Symbol.writeEx('%s%TcHmiSrv.Config::CERTIFICATE%/s%', base64Content, function (data) {
                    if (data.error === TcHmi.Errors.NONE) {
                        // Successfully wrote the Base64 certificate content.
                    } else {
                        // Writing failed. Inspect the error details in the callback data.
                    }
                });
            };

            reader.onerror = () => {
                // FileReader failed to read the selected file.
                console.error('The selected file could not be read.');
            };

            reader.readAsText(selectedFile);
        });
    </script>
</div>