script upload image

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 }); });

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; }