Pada artikel X ini, Aurealisa akan membuat alat/tools untuk mengunggah foto dan mendapatkan tautan untuk dibagikan melalui imgur.com secara otomatis.
Langkah pembuatan
1. Tambahkan kode dibawah pada laman posting atau stastis anda.<div class="ensikologyDropzone">
<div class="ensikologyInfoimg"></div>
</div>2. Kemudian gunakan 2 file JS di bawah ini
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@5ccc9f9/resource/js/images-upload-imgur.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@5ccc9f9/resource/js/images-upload.js"></script>Note: Silahkan anda copy dan simpan sendiri pada hosting, dan jangan lupa diedit lagi sesuka hati.
atau anda bisa menyalin langsung dibawah ini.
/* 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.ensikologyDropzone = document.querySelectorAll('.ensikologyDropzone');
this.ensikologyInfoimg = document.querySelectorAll('.ensikologyInfoimg');
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 gambar');
input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});
Array.prototype.forEach.call(this.ensikologyInfoimg, function (zone) {
zone.appendChild(p1);
zone.appendChild(p2);
}.bind(this));
Array.prototype.forEach.call(this.ensikologyDropzone, 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://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@db50cea/resource/js/images-upload-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('ensikologyDropzone-dragging');
} else {
e.target.parentNode.classList.add('ensikologyDropzone-dragging');
}
}
}, false);
});
},
run: function () {
var loadingModal = document.querySelector('.loading-modal');
if (!loadingModal) {
this.loading();
}
this.createDragZone();
}
};
return Imgur;
}));File upload.js akan memiliki konten sprti berikut
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" id="copylinkimg" onclick="this.select()" value=\"' + get_link + '\"/></div>' + '<div class="showimg"><img class="img" alt="Imgur Upload Aurealisa" src=\"' + get_link + '\"/></div>';
}
};
new Imgur({
clientid: '2e7868dbba256c9',
callback: feedback
});
Tambahkan CSS untuk tools di atas dengan kode di bawah ini
body.loading .loading-modal{display:block}
.ensikologyDropzone{border:2px dashed #999;border-radius:10px;position:relative;margin:0 auto;clear:both;}
.ensikologyInfoimg{margin:0 auto;margin-top:20px;margin-bottom:20px}
.ensikologyDropzone 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}
.ensikologyDropzone.ensikologyDropzone-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%}DEMO
Itulah tutorial cara membuat tools upload foto secara otomatis di blog, semoga bermanfaat.
Add your comment Hide comment