public/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Untitled Document</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Netlify Identity Widget -->
    <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    <script type="text/javascript" src="js/ImageTools.js"></script>
</head>

<body>
    <div class="container mt-5">
        <h2>Json data example</h2>
        <input type="text" id="text" class="form-control" />
        <button class="btn btn-outline-dark mt-3" id="save" style="display: none;">
        Save
      </button>
    </div>

    <div class="container mt-5">
        <h2>Image Example</h2>
        <input type="file" id="select" />
        <br />
        <img id="image" />
    </div>

    <div class="container mt-5">
        <h2>Result:</h2>
        <div id="result"></div>
    </div>

    <script>
        const saveBut = document.querySelector("#save");

        netlifyIdentity.on("login", function(user) {
            console.log(user);
            saveBut.style.display = "block";
            saveBut.addEventListener("click", function() {
                let mytext = document.querySelector("#text").value;
                let data = {
                    text: mytext,
                };
                let type = "json";
                save(data, type);
            });
        });

        async function save(data, type) {
            const token = await netlifyIdentity.currentUser().jwt();
            let user = await netlifyIdentity.currentUser();

            const response = await fetch("/.netlify/functions/save", {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                    method: "post",
                    body: JSON.stringify({
                        data: data,
                        type: type,
                    }),
                })
                .then((response) => response.text())
                .then(function(res) {
                    console.log(res);
                    document.querySelector(
                        "#result"
                    ).innerHTML = `Result: <b>${res}</b>`;
                });
        }

        document.getElementById("select").onchange = function(evt) {
            ImageTools.resize(
                this.files[0], {
                    width: 500, // maximum width
                    height: 500, // maximum height
                },
                function(blob, didItResize) {
                    // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')

                    // you can also now upload this blob using an XHR.
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = function() {
                        var base64data = reader.result;

                        let name = Math.random().toString(36).substr(2, 9) + ".jpg";
                        let path = "img/" + name;

                        // first, temporarily show the base64 data
                        document.querySelector("#image").src = base64data;

                        // save the image
                        let data = base64data;
                        let type = "image";
                        save(data, type);
                    };
                }
            );
        };
    </script>
</body>

</html>