I've done a plugin (for MyBB 1.8) based on this tutorial, it's waiting for approval.
The "button" (text link) is in the full edit form, under the clickable smilies box.
@TODO : I'll transform the popup into a modal dialog and modify the JS (JQuery improvment)
(2015-02-10, 08:31 AM)Crazycat Wrote: [ -> ]I've done a plugin (for MyBB 1.8) based on this tutorial, it's waiting for approval.
The "button" (text link) is in the full edit form, under the clickable smilies box.
@TODO : I'll transform the popup into a modal dialog and modify the JS (JQuery improvment)
I look forward to trying it out.
Seen
I'll use this version for my modal version.
[
attachment=35438]
This is running on 1.6.18
Reading though this thread gave me few ideas and tips on how to tweak this mod.
To get yours like mine first download all the needed images:
[
attachment=35439]
Then follow OP's guide on where to place the images.
Next create imgur.php in root.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Upload to Imgur</title>
</head>
<body>
<div>
<img src="images/imgur.png" border="0" /></div>
<script>
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
/* Is the file an image? */
if (!file || !file.type.match(/image.*/)) return;
/* It is! */
document.body.className = "uploading";
/* Lets build a FormData object*/
var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
fd.append("image", file); // Append the file
var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
xhr.onload = function() {
var code = '[img]' + JSON.parse(xhr.responseText).data.link + '[/img]';
var editor = eval('opener.' + 'clickableEditor');
editor.performInsert(code);
javascript:window.close()
}
// Ok, I don't handle the errors. An exercice for the reader.
xhr.setRequestHeader('Authorization', 'Client-ID <yourkey>');
/* And now, we send the formdata */
xhr.send(fd);
}
</script>
</p>
<p><img src="images/loader.gif" border="0" /></p>
</br>
<img src="images/icn-upload.png" border="0" />
<span style="color:#b1b3b7;font-size:1.31579em;font-family:arial;font-weight:600;text-align:center;display:block;margin: 0em">Drop images here</span>
<span style="color:#fff;font-family:monospace;text-align:center;display:block;margin: 1em">or</span>
<button onclick="document.querySelector('input').click()">Select Files</button>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
<style>
body {text-align: center; background-color: #000; overflow-x:hidden; overflow-y:auto; color:#888}
div { background-color: rgb(43, 43, 43); border-bottom: 2px solid rgb(68, 68, 66); margin: -8px;}
p {display: none}
.uploading p {display: inline}
</style>
</body>
</html>
Then just follows OP's post.