jube-fork/Jube.App/wwwroot/kendo/examples/chat/toolbar.html

<!DOCTYPE html>
<html>
<head>
    <title>Toolbar</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
<div id="example">
    <div class="demo-section k-content">
        <div id="chat"></div>
        <input name="files" id="files" type="file" />
        <div class="demo-hint">You can use the Image tool in the toolbar to send an image. Or drop an image on the Chat component.</div>
    </div>

    <script>
        var chat;

        $(document).ready(function () {
            chat = $("#chat").kendoChat({
                toolClick: function (ev) {
                    if (ev.name === "sendimage") {
                        $("#files").click();
                    }
                },
                toolbar: {
                    toggleable: true,
                    buttons: [
                        { name: "sendimage", iconClass: "k-icon k-i-image" }
                    ]
                }
            }).data("kendoChat");

            var upload = $("#files").kendoUpload({
                async: {
                    saveUrl: "../upload/save",
                    removeUrl: "../upload/remove",
                    autoUpload: true
                },
                validation: {
                    allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
                },
                success: onSuccess,
                showFileList: false,
                dropZone: "#chat"
            }).data("kendoUpload");

            upload.wrapper.hide();
        });

        function onSuccess(e) {
            if (e.operation === "upload") {
                for (var i = 0; i < e.files.length; i++) {
                    var file = e.files[i].rawFile;

                    if (file) {
                        var reader = new FileReader();

                        reader.onloadend = function () {
                            chat.renderAttachments({
                                attachments: [{
                                    contentType: "image_card",
                                    content: {
                                        image: this.result
                                    }
                                }],
                                attachmentLayout: "list"
                            }, chat.getUser());
                        };

                        reader.readAsDataURL(file);
                    }
                }
            }
        }

        var IMAGE_CARD_TEMPLATE = kendo.template(
            '<div class="k-card k-card-type-rich">' +
            '<div class="k-card-body quoteCard">' +
            '<img class="image-attachment" src="#: image #" />' +
            '</div>' +
            '</div>'
        );

        kendo.chat.registerTemplate("image_card", IMAGE_CARD_TEMPLATE);
    </script>

    <style>
        .k-card .image-attachment {
            max-height: 120px;
        }
    </style>
</div>


    
</body>
</html>