index.pug

html
    body
        img(id="my-image")
        h3 Imagekit Demo
        form(action='#' onSubmit='upload(event)')
            input(type='file' id='file1')
            input(type="submit")
        div(id='info')
            div(id='status')

            div(id='images' style='display: none')

                div(id='orig_image') 
                    h4 Original Image
                    p
                        img(src="")
                div(id='trans_image') 
                    h4 Sample transformation with height: 300, width: 400: 
                    p
                        img(src="")    

        // Copy paste manually from dist
        script(type='text/javascript' src="./imagekit.min.js")
        script.
            try {
                var imagekit = new ImageKit({
                    publicKey: "!{publicKey}",
                    urlEndpoint: "!{urlEndpoint}",
                });


                window.imagekit = imagekit;

                var url = imagekit.url({
                    src: "https://ik.imagekit.io/demo/default-image.jpg",
                    transformation: [{
                        height: 100
                    }]
                })

                var img = document.getElementById("my-image");
                console.log(url);
                img.src = url;


                function upload(e) {
                    e.preventDefault();
                    var file = document.getElementById("file1");
                    var fileSize = file.files[0].size;
                    var AUTH_INVALID_RESPONSE = "Invalid response from authenticationEndpoint. The SDK expects a JSON response with three fields i.e. signature, token and expire."
                    var statusEl = document.getElementById("status");
                    statusEl.innerHTML = "Uploading...";

                    // Use this if you want to track upload progress
                    var customXHR = new XMLHttpRequest();
                    customXHR.upload.addEventListener('progress', function (e) {
                        if (e.loaded <= fileSize) {
                            var percent = Math.round(e.loaded / fileSize * 100);
                            console.log(`Uploaded ${percent}%`);
                        } 

                        if(e.loaded == e.total){
                            console.log("Upload done");
                        }
                    });

                    // Generating security parameters using authenticationEndpoint
                    const securityParametersRequest = new XMLHttpRequest();
                    securityParametersRequest.timeout = 60000;
                    var urlObj = new URL("!{authenticationEndpoint}");
                    securityParametersRequest.open('GET', urlObj.toString());
                    securityParametersRequest.ontimeout = function (e) {
                        console.log(e.message);
                        return statusEl.innerHTML = "Timeout generating security parameters. "+ e.message
                    };
                    securityParametersRequest.onerror = function (e) {
                        console.log(e.message)
                        return statusEl.innerHTML = "Request to authenticationEndpoint failed due to network error."+ e.message
                    }
                    securityParametersRequest.onload = () => {
                        if(securityParametersRequest.status === 200) {
                            var securityParametersObj = JSON.parse(securityParametersRequest.response)

                            if(!securityParametersObj || !securityParametersObj.token || !securityParametersObj.signature || !securityParametersObj.expire) {
                                return statusEl.innerHTML = AUTH_INVALID_RESPONSE;
                            }
                            
                            // Uploading image
                            imagekit.upload({
                                xhr: customXHR, // Use this if you want to track upload progress
                                file : file.files[0],
                                fileName : file.files[0].name || "test_image.jpg",
                                tags : ["test_tag_1"],
                                token: securityParametersObj.token,
                                signature: securityParametersObj.signature,
                                expire: securityParametersObj.expire,
                                //- extensions: [
                                //-     {
                                //-         name: "aws-auto-tagging",
                                //-         minConfidence: 80,
                                //-         maxTags: 10
                                //-     }
                                //- ],
                            }, function(err, result) {
                                if (err) {
                                    statusEl.innerHTML = "Error uploading image. "+ err.message; 
                                    console.log(err) 
                                } else {
                                    statusEl.innerHTML = "File Uploaded";
                                    var sampleTransformations = [{ HEIGHT: 300, WIDTH: 400}];
                                    srcUrl = result.url;
                                    transformedURL = imagekit.url({
                                        src: srcUrl,
                                        transformation : sampleTransformations
                                    });

                                    var orig_img = document.querySelector("#orig_image > p > img");
                                    var trans_img = document.querySelector("#trans_image > p > img");

                                    orig_img.setAttribute("src", srcUrl);
                                    trans_img.setAttribute("src", transformedURL);

                                    var el  = document.getElementById('images')
                                    el.setAttribute("style", "");
                                }
                            });
                        }  else {
                            return statusEl.innerHTML = AUTH_INVALID_RESPONSE;
                        }
                    }

                    securityParametersRequest.send();
                }
            } catch(ex) {
                console.log(ex);
            }