plugin-imgur.html

<template id="pluginImgurUploadSelector">
    <div>
        <a @click="pickImage()">
            <i class="fa fa-file-image-o"></i>
            <input
                @change="uploadImage($event)"
                id="ImgurUploader"
                type="file"
                accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.pdf,.mov,.mp4"
                style="display: none; width: 0; height: 0;">
        </a>
    </div>
</template>

<template id="pluginImgurUploadEmbedded">
    <div>
        <i class="fa fa-angle-down" aria-hidden="true" style="font-size: 1.3em; font-weight: bold;"></i>
        <img v-if="show" :src="url" style="display: block;">
    </div>
</template>

<script>
kiwi.plugin('imgur-upload', function(kiwi, log) {
    var clientID = '6c26a0ec0e5496a';
    var maxSize = 10240;
    var imgurUploadSelector = new kiwi.Vue({
        template: '#pluginImgurUploadSelector',
        methods: {
            pickImage: function pickImage() {
                document.querySelector('#ImgurUploader').click();
            },
            uploadImage: function uploadImage(event) {
                var file = event.target.files[0];
                if (!file) {
                    return;
                }
                if (!this.isSupported(file.type)) {
                    this.sendMessage('Imgur Upload: Sorry, only images/vidoes can be uploaded to imgur.', 'error');
                    return;
                }
                if (!file.size >= maxSize) {
                    this.sendMessage('Imgur Upload: Sorry, file size limit is ${maxSize} bytes, you tried to upload ${file.size} bytes.', 'error');
                    return;
                }
                var fd = new FormData();
                fd.append('image', file);
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'https://api.imgur.com/3/image');
                xhr.onload = function () {
                    try {
                        var resp = JSON.parse(xhr.responseText);
                        if (resp.success && resp.data.link) {
                            var buffer = kiwi.state.getActiveBuffer();
                            buffer.say('Imgur Upload: ' + resp.data.link);
                        } else {
                            this.sendMessage('Imgur Upload: An error was reported with upload' +
                                ('error' in resp.data ? ' (' + resp.data.error + ')' : ''), 'error');
                        }
                    } catch (e) {
                        this.sendMessage('Imgur Upload: An error was caught while uploading (' + e.message + ')', 'error');
                    }
                };
                xhr.setRequestHeader('Authorization', 'Client-ID ' + clientID);
                xhr.send(fd);
            },
            sendMessage: function sendMessage(message, type) {
                var buffer = kiwi.state.getActiveBuffer();
                kiwi.state.addMessage(buffer, {
                    time: Date.now(),
                    nick: '',
                    message: message,
                    type: type,
                });
            },
            isSupported: function isSupported(fileType) {
                // TODO this needs some extra work to test for .mp4 & .mov
                if (!fileType) {
                    return false;
                }
                if (fileType.match(/image\/.*/)) {
                    return true;
                }
                if (fileType === 'application/pdf') {
                    return true;
                }
                log.error('unsupported file type:', fileType);
                return false;
            },
        },
    });

    kiwi.addUi('input', imgurUploadSelector.$mount().$el);


    // Embedding imgur urls into the message list
    var imgurUploadEmbedded = {
        template: '#pluginImgurUploadEmbedded',
        data: function data() {
            return {
                url: '',
                show: true,
            };
        },
        methods: {
            toggleImage: function toggleImage() {
                this.show = !this.show;
            },
        },
    };

    var imageID = 0;
    // https://i.imgur.com/ceRKsf5.png
    // https://imgur.com/ceRKsf5

    var imgurDirect = RegExp('(^|\\s+)(https?://(i.imgur.com/[a-zA-Z0-9]+\\.\\w{3}))(\\s+|$)');
    // var imgurLink = RegExp('^\\s*https?://imgur.com/([a-zA-Z0-9]+)(\s+(.+))?\\s*$');


    kiwi.state.$on('message.poststyle', function postStyle(event) {
        var message = event.message;
        if (!message || message.type !== 'privmsg') {
            return;
        }

        var html = message.html;
        if (imgurDirect.test(message.message)) {
            var matches = message.message.match(imgurDirect);
            var img = document.createElement('img');
            img.src = 'https://' + matches[3];
            img.style.display = 'block';
            img.id = "pluginImgurImageID_" + imageID++;
            var toggle = '<i id="pluginImgurImageToggle_' +
                (imageID - 1) +
                '" class="fa fa-fw fa-angle-down" onclick="pluginImgurArrowClick(' +
                (imageID - 1) + ')" aria-hidden="true" style="font-size: 1.3em; font-weight: bold; cursor: pointer; padding: 0 6px;"></i>';
            var msgHTML = RegExp('<a data-url="' + escapeRegExp(matches[2]) + '".*?></a>', 'i');
            message.html = html.replace(msgHTML, toggle + img.outerHTML);
        } else {
            console.log('msg', JSON.stringify(message));
        }
    });
    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
    }
});

function pluginImgurArrowClick(imgID) {
    var display = document.getElementById('pluginImgurImageID_' + imgID).style.display;
    if (display === 'none') {
        document.getElementById('pluginImgurImageID_' + imgID).style.display = 'block';
        document.getElementById('pluginImgurImageToggle_' + imgID).classList.remove('fa-angle-right');
        document.getElementById('pluginImgurImageToggle_' + imgID).classList.add('fa-angle-down');
    } else {
        document.getElementById('pluginImgurImageID_' + imgID).style.display = 'none';
        document.getElementById('pluginImgurImageToggle_' + imgID).classList.remove('fa-angle-down');
        document.getElementById('pluginImgurImageToggle_' + imgID).classList.add('fa-angle-right');
    }
}
</script>