ProcessFile

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Process File</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.4.4/qrcode.min.js"></script>
</head>

<body>

    <div style="width: fit-content; margin: 0 auto;">
        <form id="form">
            <div style="padding: 20px;">
                <p><input type="file" id="fileToProcess"></p>
                <p><input type="button" value="Process" id="processFile"></p>
                <p><label id="statusText">Status: Idle</label></p>
            </div>
            <div id="canvasHolder"></div>
        </form>
    </div>

    <script>
        (function () {
            document.onreadystatechange = function () {
                if (document.readyState === "interactive") {
                    const processFileButton = document.getElementById("processFile");
                    const fileToProcessButton = document.getElementById("fileToProcess");
                    const statusText = document.getElementById("statusText");
                    const canvasHolder = document.getElementById("canvasHolder");

                    processFileButton.addEventListener("click", processFile, false);
                    fileToProcessButton.addEventListener("change", resetAll, false);

                    function splitString(string, size, multiline) {
                        const pattern = (multiline ? "[^]" : ".") + "{1," + size + "}";
                        const rgx = new RegExp(pattern, "g");
                        return string.match(rgx);
                    }

                    function resetAll(event) {
                        statusText.innerText = "Status: Idle";
                        canvasHolder.innerHTML = "";
                    }

                    function processFile(event) {
                        const file = fileToProcessButton.files[0];
                        const reader = new FileReader();

                        reader.readAsDataURL(file);

                        reader.onload = function () {
                            const fileContent = reader.result;
                            console.log(fileContent)
                            const parts = splitString(fileContent, 2953, false);
                            const options = {
                                width: 600,
                                margin: 0,
                                errorCorrectionLevel: "L"
                            }

                            parts.forEach((part, index) => {
                                const canvasId = "canvas" + index;
                                const label = document.createElement("label");
                                const canvas = document.createElement("canvas");
                                const hr = document.createElement("hr");

                                label.setAttribute("for", canvasId);
                                label.setAttribute("style", "display: block; margin-bottom: 10px;");
                                label.innerText = "Part " + (index + 1);
                                canvas.setAttribute("id", canvasId);

                                canvasHolder.appendChild(label);
                                canvasHolder.appendChild(canvas);
                                canvasHolder.appendChild(hr);

                                QRCode.toCanvas(canvas, part, options, (error) => {
                                    if (error) {
                                        statusText.innerText = "Status: An error has occurred\n\n" + error;
                                    }
                                    else {
                                        statusText.innerText = "Status: Processed successfully";
                                    }
                                });
                            });
                        };
                    }
                }
            };
        })();
    </script>
</body>

</html> 

Comentários

Postar um comentário

Postagens mais visitadas