Upload Photo

Tarik berkas gambar ke dalam kotak dibawah atau klik untuk mengunggah gambar.

body.loading .loading-modal{display:block} .dropzone{border:2px dashed #999;border-radius:10px;position:relative;margin:0 auto;clear:both;} .infoimg{margin:0 auto;margin-top:20px;margin-bottom:20px} .dropzone p{margin:0;text-align:center;width:100%;font-weight:bold;color:#999} .input{height:100%;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;cursor:-webkit-zoom-in} .status{border-radius:5px;text-align:center;margin-left:auto;margin-right:auto} .image-url{width:calc(100% - 10px);padding:5px;border:1px solid #999;border-radius:5px;color:#999} .linkimg{margin:20px 0} .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{margin-left:auto;margin-right:auto;margin-top:15%;margin-bottom:15%} /* 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 p1, p2, input;

p1 = this.createEls('p', {}, 'Seret file gambar ke sini'); p2 = this.createEls('p', {}, 'Atau klik untuk memilih foto'); input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});

Array.prototype.forEach.call(this.infoimg, function (zone) { zone.appendChild(p1); zone.appendChild(p2); }.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: '//cdn.jsdelivr.net/gh/aioseo/imgur/src/svg/loading-spin.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 =

' ' + ' ';

}

};

new Imgur({

clientid: 'e5a2167b11581f6',

callback: feedback

});

Aurealisa

Upload Photo

2 comments