script upload image

3 posters

Go down

script upload image  Empty script upload image

Post by poesia-verses May 21st 2021, 11:47 am

here is the image upload script for MYBB on IMGUR. can it be redone for forumotion?

Code:
    $(document).ready(function() {

        // loading styles
        $('<link>').appendTo('head').attr({
            type: 'text/css',
            rel: 'stylesheet',
            href: '/files/0018/14/a0/44968.css'
        });

        $('<div class="dropzone"><input class="button" type="button" value="Загрузить на Imgur.com">').appendTo('#imageupload-left');
        $('#image_upload .button').val('Загрузить на Uploads.ru');

        /*! imgur 2.0.4 | (c) 2016 Pedro Rog?:copyright:rio | MIT License */
        ! function(a, b) {
            "use strict";
            "function" == typeof define && define.amd ? define([], b) : "object" == typeof exports ? module.exports = b() : a.Imgur = b()
        }(this, function() {
            "use strict";
            var a = function(b) {
                if (!(this && this instanceof a)) return new a(b);
                if (b || (b = {}), !b.clientid) throw "Provide a valid Client Id here: http://api.imgur.com/";
                this.clientid = b.clientid, this.endpoint = "https://api.imgur.com/3/image", this.callback = b.callback || void 0, this.dropzone = document.querySelectorAll(".dropzone"), this.run()
            };
            return a.prototype = {
                createEls: function(a, b, c) {
                    var d, e = document.createElement(a);
                    for (d in b) b.hasOwnProperty(d) && (e[d] = b[d]);
                    return c && e.appendChild(document.createTextNode(c)), e
                },
                insertAfter: function(a, b) {
                    a.parentNode.insertBefore(b, a.nextSibling)
                },
                post: function(a, b, c) {
                    var d = new XMLHttpRequest;
                    d.open("POST", a, !0), d.setRequestHeader("Authorization", "Client-ID " + this.clientid), d.onreadystatechange = function() {
                        if (4 === this.readyState) {
                            if (!(this.status >= 200 && this.status < 300)) throw new Error(this.status + " - " + this.statusText);
                            var a = "";
                            try {
                                a = JSON.parse(this.responseText)
                            } catch (b) {
                                a = this.responseText
                            }
                            c.call(window, a)
                        }
                    }, d.send(b), d = null
                },
                createDragZone: function() {
                    var b;
                    b = this.createEls("input", {
                        type: "file",
                        accept: "image/*"
                    }), Array.prototype.forEach.call(this.dropzone, function(c) {
                        c.appendChild(b), this.status(c), this.upload(c)
                    }.bind(this))
                },
                loading: function() {
                    var a, b;
                    a = this.createEls("div", {
                        className: "loading-modal"
                    }), b = this.createEls("img", {
                        className: "loading-image",
                        src: "/files/0018/14/a0/56875.svg"
                    }), a.appendChild(b), document.getElementById('image-area-tcon-computer').appendChild(a)
                },
                status: function(a) {
                    var b = this.createEls("div", {
                        className: "status"
                    });
                    this.insertAfter(a, b)
                },
                matchFiles: function(a, b) {
                    var c = b.nextSibling;
                    if (a.type.match(/image/) && "image/svg+xml" !== a.type) {
                        document.body.classList.add("busy"), c.classList.remove("bg-success", "bg-danger"), c.innerHTML = "";
                        var d = new FormData;
                        d.append("image", a), this.post(this.endpoint, d, function(a) {
                            document.body.classList.remove("busy"), "function" == typeof this.callback && this.callback.call(this, a)
                        }.bind(this))
                    } else c.classList.remove("bg-success"), c.classList.add("bg-danger"), c.innerHTML = "Invalid archive"
                },
                upload: function(a) {
                    var b, c, d, e, f = ["dragenter", "dragleave", "dragover", "drop"];
                    a.addEventListener("change", function(f) {
                        if (f.target && "INPUT" === f.target.nodeName && "file" === f.target.type)
                            for (c = f.target.files, d = 0, e = c.length; e > d; d += 1) b = c[d], this.matchFiles(b, a)
                    }.bind(this), !1), f.map(function(b) {
                        a.addEventListener(b, function(a) {
                            a.target && "INPUT" === a.target.nodeName && "file" === a.target.type && ("dragleave" === b || "drop" === b ? a.target.parentNode.classList.remove("dropzone-dragging") : a.target.parentNode.classList.add("dropzone-dragging"))
                        }, !1)
                    })
                },
                run: function() {
                    var a = document.querySelector(".loading-modal");
                    a || this.loading(), this.createDragZone()
                }
            }, a
        });




        var feedback = function(res) {
            if (res.success === true) {


                var s = res.data.link.replace(/(\.[^\.]+)$/, 's$1');
                var m = res.data.link.replace(/(\.[^\.]+)$/, 'm$1');

                function typeInTextarea(el, newText) {
                    var start = el.prop("selectionStart")
                    var end = el.prop("selectionEnd")
                    var text = el.val()
                    var before = text.substring(0, start)
                    var after = text.substring(end, text.length)
                    el.val(before + newText + after)
                    el[0].selectionStart = el[0].selectionEnd = start + newText.length
                    el.focus()
                    return false
                }


                $('<div id="image-insert-format" class="imgur"><strong>Вставить как:</strong><br><select id="imgur-option" class="imgur"><option value=\'1\'>Превью</option><option value=\'2\' selected>Оригинал</option></select></div>').appendTo('#imageupload-left');

                $('<div id="load-image-container" class="imgur"><img class="imgur-preview" src="' + s + '" original-title="Вставить"></div><div id="insert-image-tip" class="imgur"><span>Нажмите на изображение, чтобы вставить в форму.</span></div>').appendTo('#imageupload-right');

                $('<a id="action-insert-textarea" class="imgur">Вставить</a><a id="action-clean-uploaded" class="imgur">Очистить</a><a id="action-delete-image" class="imgur">Удалить файл</a>').prependTo('#image-area-actions');




                $("#action-delete-image.imgur").click(function() {
                    if (confirm("Вы действительно хотите удалить загруженный файл с сервера?")) {

                        $.ajax({
                            url: 'https://api.imgur.com/3/image/' + res.data.deletehash,
                            type: 'DELETE',
                            headers: {
                                "Authorization": "Client-ID cc86a8de0e7c459"
                            },
                            success: function(result) {
                                $('#image-insert-format.imgur, #load-image-container.imgur, #insert-image-tip.imgur, #action-insert-textarea.imgur, #action-delete-image.imgur, #action-clean-uploaded.imgur').remove();
                            }
                        });

                    }
                });




                $("#action-insert-textarea.imgur, .imgur-preview").click(function() {
                    $("#image-area").hide();
                    var option = $("#imgur-option.imgur").val();
                    if (option == 1) {
                        typeInTextarea($("#main-reply"), '[url="' + res.data.link + '"][img]' + m + '[/img][/url]');
                    } else if (option == 2) {
                        typeInTextarea($("#main-reply"), '[img]' + res.data.link + '[/img]');
                    }
                });


                $("#image_upload .button,.dropzone,#action-clean-uploaded.imgur, #action-return, #action-insert-textarea").click(function() {
                    $('#image-insert-format.imgur, #load-image-container.imgur, #insert-image-tip.imgur, #action-insert-textarea.imgur, #action-delete-image.imgur, #action-clean-uploaded.imgur').remove();
                });


                $("#action-insert-textarea, #action-clean-uploaded.imgur, #action-delete-image.imgur").click(function() {
                    $('#image_upload .button').css({
                        "opacity": "1",
                        "cursor": "pointer"
                    }).prop("disabled", false);
                });

            }
        };

        $(".dropzone, #action-return, #action-insert-uploaded").click(function() {
            $('#uploaded-images').empty().hide();
            $('#image-insert-format,#insert-all-images-container,#insert-image-tip').hide();
            $('#action-insert-uploaded,#action-clean-uploaded,#action-drop-files').hide();
            $('#load-image-container,#imageQueue,#upload-button-container').hide();
            $('#image-width,#image-thumb-width').hide();
            $('#image_upload .button').css({
                "opacity": "0.5",
                "cursor": "not-allowed"
            }).prop("disabled", true);
        });
        $('#image_upload .button').click(function() {
            $('.dropzone').css({
                "opacity": "0.5"
            });
            $('.dropzone input[type="file"]').css({
                "cursor": "not-allowed"
            }).prop("disabled", true);
        });

        $('#action-return, #action-insert-uploaded, #action-clean-uploaded, #action-drop-files').click(function() {
            $('#image_upload .button').css({
                "opacity": "1",
                "cursor": "pointer"
            }).prop("disabled", false);
            $('.dropzone').css({
                "opacity": "1"
            });
            $('.dropzone input[type="file"]').css({
                "cursor": "pointer"
            }).prop("disabled", false);
        });


        new Imgur({
            clientid: 'cc86a8de0e7c459',
            callback: feedback
        });
    });
poesia-verses
poesia-verses
Forumember

Posts : 101
Reputation : 3
Language : russian

View user profile https://stikhi-ru-vhod.forum2x2.ru/

Back to top Go down

script upload image  Empty Re: script upload image

Post by poesia-verses May 21st 2021, 11:49 am

style

Code:
#imageupload-left .button{width:100%!important}.dropzone{position:relative;margin-top:1em}.dropzone input[type=file]{height:100%;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;font-size:0;cursor:pointer}.dropzone+.status{display:none}.loading-modal{background-color:rgba(72,72,72,.95);display:none;position:absolute;top:50%;margin-top:-50px;left:calc(50% - 50px);border-radius:7px;height:100px;width:100px;z-index:99999}.loading-image{position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px}body.busy .loading-modal{display:block}.dropzone+.status.bg-danger{display:block;padding:0 10px;position:absolute;height:25px;line-height:25px;text-align:center;text-transform:uppercase;background:rgba(255,187,187,.95);color:#bb5a5a;margin-top:10px}.status.bg-danger:after{content:"";position:absolute;left:10px;top:-20px;width:0;height:0;border:10px solid transparent;border-bottom:10px solid rgba(255,187,187,.95)}

#imageupload-left {
    width: 170px;
    display: inline-block;
}
#imageupload-right {
    width: 370px;
    margin-left: 10px;
    display: inline-block;
}
.imgur-preview {
max-width: 75px;
border: 1px solid !important;
cursor: pointer;
}
poesia-verses
poesia-verses
Forumember

Posts : 101
Reputation : 3
Language : russian

View user profile https://stikhi-ru-vhod.forum2x2.ru/

Back to top Go down

script upload image  Empty Re: script upload image

Post by skouliki May 21st 2021, 12:45 pm

Hello

Why do you need a script at first place we have servimg
skouliki
skouliki
Manager
Manager

Female Posts : 11262
Reputation : 1403
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

script upload image  Empty Re: script upload image

Post by Neptune- May 21st 2021, 10:12 pm

Neptune-
Neptune-
Forumember

Male Posts : 447
Reputation : 100
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

View user profile https://www.galaxie-series.net/

TonnyKamper likes this post

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum