Công cụ upload ảnh và tự động lấy link ảnh trên Blogger

<!--[ Image upload tool imgur by Giahuy.net ]-->
<style>
body.loading .loading-modal{display:block}
.up-i{background: var(--contentBg-alt);padding: 10px;border-radius: 5px;}
.dropzone{border:1px dashed #999;position:relative;margin:0 auto;clear:both;}
.infoimg{margin:20px auto}
.dropzone p{margin:0;text-align:center;width:100%;}
.input{height:100%;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;cursor:cell}
.status{border-radius:5px;text-align:center;margin-left:auto;margin-right:auto}
input.image-url{width: 100%; background-color:var(--inputBg);border: 1px solid var(--contentBd-color);padding: 5px 5px 5px 32px;border-radius: 5px;background-image: url('//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZzjBu8th_qMHCuystN-4AcyLD6H_ODGLwcBO5M2OaS0jbKKtj1UQxY3TYm2ZCyNLRO62zJHDpoktsNj04WFezMjZ-IucHoZXg3pzs6yQsRtP6ncpKUevdkdN-bPtXaoragNYkuYyOCt6bse3GFPpiZUflsTniF-fxRGqgUrQ8gYwHPH_JRKP0BZtRvo/s0/icon.png');background-repeat: no-repeat;background-position: -34px -108px;}
.linkimg{width: 100%;margin:20px auto;display:inline-block}
.dropzone.dropzone-dragging{border-color:#000}
.loading-modal{background-color:rgba(255,255,255,.8);display:none;position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%}
.loading-table{border:none!important;margin-left:auto;margin-right:auto;margin-top:15%;margin-bottom:15%}
.loading-image {min-width:100px;opacity: 1;filter: blur(0);}
#svgZ {text-align:center}#svgZ svg {width:79px;height:79px}</style>

<div class='up-i'>
<div class='dropzone'>
  <div class='infoimg'>
    <div id='svgZ'><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256' enable-background='new 0 0 256 256' xml:space='preserve'><g><path fill='' d='M127.7,31.6c-7.2,0.9-18.7,4.6-25.3,8.2c-13.6,7.6-26.2,21.9-31.1,35.5L70,79h-4.1c-5.6,0-15.1,2-20.8,4.4c-15.1,6.3-27.5,19.8-32.8,35.6c-1.9,5.7-2.1,7.3-2.2,17.9c0,10.8,0.2,12.1,2.2,17.9c6.5,18.7,20.7,32.2,39.6,37.8c5.1,1.6,8,1.7,27.9,2c21.9,0.4,22.3,0.4,24-1.2c2.3-2.3,2.2-6.6-0.1-8.2c-1.5-1.1-4.9-1.2-21.2-1.2c-22.2,0-26.7-0.7-36-5.1c-4.7-2.3-7.4-4.3-12.2-9.2c-9.6-9.8-13.6-19.4-13.6-32.7c0-13.5,3.9-22.9,13.7-32.8c9.9-10.1,20.1-14.2,35.2-14.2c3.7,0,7.2-0.3,7.7-0.6c0.5-0.4,2-3.5,3.3-7.1C84.4,71,91,61.6,99.9,54.5c24.5-19.1,58.7-16.2,79.7,6.8c9,9.8,13.9,21.1,15,34.6c0.8,8.7,1.5,9.6,8.6,10.9c13.7,2.4,25.8,13,30.3,26.4c1.8,5.3,2.2,15.2,0.8,21.1c-2.1,9.2-10.7,20.3-19.2,24.8c-8.1,4.3-12,4.8-38,4.8c-21.6,0-23.6,0.1-25.2,1.4c-2.3,1.9-2.3,6.2,0.1,8.1c1.5,1.2,3.9,1.4,24.8,1.4c17.3,0,24.7-0.3,29.3-1.2c18.4-3.5,34.4-18.7,38.7-36.9c1.6-6.5,1.6-16.9,0-23.3c-3.9-16.6-18-31.3-34.5-36.1l-4.4-1.2l-1.2-7.2C198.5,52.5,164.8,27.5,127.7,31.6z'></path><path fill='' d='M126.3,134c-0.6,0.2-7.9,7.1-16.1,15.3c-12.9,12.8-15,15.2-15,17.2c0,1.2,0.3,2.7,0.6,3.2c1,1.6,4.1,2.7,5.8,2.3c0.9-0.3,6-4.8,11.3-10l9.5-9.5v34.4c0,32.1,0.1,34.4,1.4,36.1c2,2.4,6.1,2.4,8.1,0c1.3-1.7,1.4-4,1.4-36.1v-34.4l9.6,9.5c5.2,5.1,10.3,9.6,11.2,10c1.7,0.5,4.8-0.7,5.8-2.3c0.3-0.5,0.6-1.9,0.6-3.2c0-2-2.1-4.4-14.9-17.3c-8.2-8.2-15.7-15-16.6-15.2C128.2,133.8,126.9,133.8,126.3,134z'></path></g></svg></div>
  </div>
  <input type='file' class='input' accept='image/*'></div>
  <div class='status'>
  </div>
</div>

<script type='text/javascript'>
  /* Imgur Upload Script */
(function (root, factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        root.Imgur = factory();
    }
}(this, function () {
    "use strict";
    var Imgur = function (options) {
        if (!this || !(this instanceof Imgur)) {
            return new Imgur(options);
        }

        if (!options) {
            options = {};
        }

        if (!options.clientid) {
            throw 'Provide a valid Client Id here: https://api.imgur.com/';
        }

        this.clientid = options.clientid;
        this.endpoint = 'https://api.imgur.com/3/image';
        this.callback = options.callback || undefined;
        this.dropzone = document.querySelectorAll('.dropzone');
        this.infoimg = document.querySelectorAll('.infoimg');

        this.run();
    };

    Imgur.prototype = {
        createEls: function (name, props, text) {
            var el = document.createElement(name), p;
            for (p in props) {
                if (props.hasOwnProperty(p)) {
                    el[p] = props[p];
                }
            }
            if (text) {
                el.appendChild(document.createTextNode(text));
            }
            return el;
        },
        insertAfter: function (referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        },
        post: function (path, data, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.open('POST', path, true);
            xhttp.setRequestHeader('Authorization', 'Client-ID ' + this.clientid);
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        var response = '';
                        try {
                            response = JSON.parse(this.responseText);
                        } catch (err) {
                            response = this.responseText;
                        }
                        callback.call(window, response);
                    } else {
                        throw new Error(this.status + " - " + this.statusText);
                    }
                }
            };
            xhttp.send(data);
            xhttp = null;
        },
        createDragZone: function () {
            var p, input;

                p = this.createEls('p', {}, 'Chọn file ảnh hoặc kéo ảnh vào đây');
          		p.innerHTML = '<strong>Chọn file ảnh</strong> hoặc kéo ảnh vào đây';
            input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});

            Array.prototype.forEach.call(this.infoimg, function (zone) {
                zone.appendChild(p);
            }.bind(this));
            Array.prototype.forEach.call(this.dropzone, function (zone) {
                zone.appendChild(input);
                this.status(zone);
                this.upload(zone);
            }.bind(this));
        },
        loading: function () {
            var div, table, img;

            div = this.createEls('div', {className: 'loading-modal'});
            table = this.createEls('table', {className: 'loading-table'});
            img = this.createEls('img', {className: 'loading-image', src: 'https://www.giahuy.net/img/loading.svg'});

            div.appendChild(table);
            table.appendChild(img);
            document.body.appendChild(div);
        },
        status: function (el) {
            var div = this.createEls('div', {className: 'status'});

            this.insertAfter(el, div);
        },
        matchFiles: function (file, zone) {
            var status = zone.nextSibling;

            if (file.type.match(/image/) && file.type !== 'image/svg+xml') {
                document.body.classList.add('loading');
                status.classList.remove('bg-success', 'bg-danger');
                status.innerHTML = '';

                var fd = new FormData();
                fd.append('image', file);

                this.post(this.endpoint, fd, function (data) {
                    document.body.classList.remove('loading');
                    typeof this.callback === 'function' && this.callback.call(this, data);
                }.bind(this));
            } else {
                status.classList.remove('bg-success');
                status.classList.add('bg-danger');
                status.innerHTML = 'Invalid archive';
            }
        },
        upload: function (zone) {
            var events = ['dragenter', 'dragleave', 'dragover', 'drop'],
                file, target, i, len;

            zone.addEventListener('change', function (e) {
                if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                    target = e.target.files;

                    for (i = 0, len = target.length; i < len; i += 1) {
                        file = target[i];
                        this.matchFiles(file, zone);
                    }
                }
            }.bind(this), false);

            events.map(function (event) {
                zone.addEventListener(event, function (e) {
                    if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                        if (event === 'dragleave' || event === 'drop') {
                            e.target.parentNode.classList.remove('dropzone-dragging');
                        } else {
                            e.target.parentNode.classList.add('dropzone-dragging');
                        }
                    }
                }, false);
            });
        },
        run: function () {
            var loadingModal = document.querySelector('.loading-modal');

            if (!loadingModal) {
                this.loading();
            }
            this.createDragZone();
        }
    };

    return Imgur;
}));
  var feedback = function(res) {
    if (res.success === true) {
        var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
        document.querySelector('.status').classList.add('bg-success');
        document.querySelector('.status').innerHTML =
            '<div class="linkimg"><input class="image-url extL" id="copylinkimg" onclick="this.select()" value=\"' + get_link + '\"/></div>' + '<div class="showimg"><img class="img" alt="Imgur-Upload" src=\"' + get_link + '\"/></div>';
    }
};
  
  new Imgur({
    clientid: 'f442ebe2efe3fc7',
    callback: feedback
});</script>