pub/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTTP Server Test</title>
    <style>
        BODY {
            background-color: #E6966B;
            color: #2A180E;
        }

        INPUT, BUTTON {
            background-color: #CB5D22;
        }

        LABEL {
            cursor: pointer;
        }

        H1 {
            text-align: center;
            color: #2A180E;
        }

        UL {
            list-style-type: none;
        }

        .header {
            text-align: center;
            font-size: larger;
            font-weight: bold;
        }

        .display {
            max-width: 600px;
            margin: auto;
            display: grid;
            grid-auto-flow: row;
            grid-gap: 10px;
        }

        .upload {
            background-color: #CB5D22;
            padding: 10px;
        }

        .upload .controls {
            display: grid;
            grid-template-columns:  1fr auto;
        }

        .listing .controls {
            display: grid;
            grid-template-columns:  1fr 1fr;
            grid-gap: 10px;
        }

        #fileUpload, #uploadSuccess {
            display: none;
        }
    </style>
    <script>
        // VARS
        const FILE_ICON = 'favicon.ico';
        const FILE_INDEX = 'index.html';
        const HEAD_FILENAME = 'upload-filename'; // HTTP header to send uploading filename to server
        const SSE_CLOSE = 'close'; // SSE marker that connection is closed
        const URL_REMOVE = '/remove/';
        const URL_SSE = '/sse/';
        const URL_UPLOAD = '/upload/';

        // FUNCTIONS
        function doList() {
            const elBtnList = document.getElementById('btnList');
            const elBtnRemove = document.getElementById('btnRemove');
            const elDisplay = document.getElementById('displayEvents');
            let ndx = 0;
            elBtnList.disabled = true;
            elBtnRemove.disabled = true;
            elDisplay.innerHTML = '';
            const source = new EventSource(URL_SSE);
            source.addEventListener('error', (evt) => {
                console.dir(evt);
                source.close();
                elBtnList.disabled = false;
                console.log(`EventSource is closed by browser on error.`);
            });
            source.addEventListener('message', (evt) => {
                const msg = evt?.data;
                console.log(`source data: ${msg}`);
                if (msg === SSE_CLOSE) {
                    console.log(`EventSource is closed by server.`);
                    elBtnRemove.disabled = false;
                } else {
                    // add checkbox with label
                    const id = `item_${ndx++}`;
                    const elCheckBox = document.createElement('INPUT');
                    elCheckBox.setAttribute('type', 'checkbox');
                    elCheckBox.setAttribute('id', id);
                    elCheckBox.setAttribute('name', 'filename');
                    elCheckBox.setAttribute('value', msg);
                    if (msg === FILE_INDEX || msg === FILE_ICON)
                        elCheckBox.setAttribute('disabled', 'true');
                    const elLabel = document.createElement('LABEL');
                    elLabel.setAttribute('for', id);
                    elLabel.appendChild(document.createTextNode(msg));
                    const elItem = document.createElement('LI');
                    elItem.appendChild(elCheckBox);
                    elItem.appendChild(elLabel);
                    elDisplay.appendChild(elItem);
                }
            });
        }

        async function doRemove() {
            const files = [];
            const elBtnList = document.getElementById('btnList');
            const elBtnRemove = document.getElementById('btnRemove');
            elBtnList.disabled = true;
            elBtnRemove.disabled = true;
            // get checked filenames
            const elDisplay = document.getElementById('displayEvents');
            const items = elDisplay.querySelectorAll('[name="filename"]');
            for (const one of items)
                if (one?.checked) files.push(one.value);
            const res = await fetch(URL_REMOVE, {
                method: 'POST',
                body: JSON.stringify({files})
            });
            if (res.ok)
                elDisplay.innerHTML = await res.text();
            else
                elDisplay.innerHTML = 'Some error is occurred.';
            setTimeout(() => {
                elDisplay.innerHTML = '';
                elBtnList.disabled = false;
                elBtnRemove.disabled = false;
                doList();
            }, 2000);
        }

        async function doUpload() {
            const elBtn = document.getElementById('btnUpload');
            const elUpload = document.getElementById('fileUpload');
            const elLblUpload = document.getElementById('lblUpload');
            elBtn.disabled = true;

            const file = elUpload.files[0];
            const filename = file.name;
            const encoded = btoa(unescape(encodeURIComponent(filename)));
            const res = await fetch(URL_UPLOAD, {
                method: 'POST',
                headers: {
                    [HEAD_FILENAME]: encoded
                },
                body: file
            });
            elUpload.value = '';
            if (res.ok) {
                elLblUpload.innerText = 'File is uploaded.';
                setTimeout(() => {
                    elLblUpload.innerText = 'Click here to select file to upload...';
                }, 2000);
                doList();
            } else {
                elLblUpload.innerText = 'Some error is occurred.';
            }
        }

        function fileSelected() {
            const elUpload = document.getElementById('fileUpload');
            const file = elUpload.files[0];
            if (file) {
                const elLabel = document.getElementById('lblUpload');
                elLabel.innerText = file.name;
                const elBtnUpload = document.getElementById('btnUpload');
                elBtnUpload.disabled = false;
            }
        }

        self.addEventListener('load', doList);
    </script>
</head>
<body>
<div class="display">
    <div>Test area to check main HTTP related functions (statics, uploads, data posts, server sent events). Upload file
        to server, get files listing with SSE, post data to remove selected files.
    </div>
    <div class="upload">
        <div class="controls">
            <label for="fileUpload" id="lblUpload">Click here to select file to upload...</label>
            <button id="btnUpload" onclick="doUpload()" disabled>Upload</button>
        </div>
        <input type="file" id="fileUpload" onchange="fileSelected()">
        <div id="uploadSuccess">Uploaded</div>
    </div>
    <div class="listing">
        <div class="header">Files on Server</div>
        <div class="controls">
            <button id="btnList" onclick="doList()">List Files</button>
            <button id="btnRemove" onclick="doRemove()" disabled>Remove Selected</button>
        </div>
        <ul id="displayEvents"></ul>
    </div>
</div>
</body>
</html>