MyBB Community Forums

Pages: 1 2 3 4 5 6 7 8

1 - Get imgur api key: https://imgur.com/register/api_anon

2 - Create imgur.php in root

V2 API Version:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Upload to Imgur</title>
<div><img src="images/imgur.png" alt="" /></div>
<br /><br />
<button onclick="document.querySelector('input').click()">Select file...</button>
<input style="visibility:hidden;position:absolute;top:0;" type="file" onchange="upload(this.files[0])" accept="image/*">

<script>
    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
        fd.append("key", "your key"); // Get your own key http://api.imgur.com/
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
        xhr.onload = function() {
 var code = '[img]' + JSON.parse(xhr.responseText).upload.links.original + '[/img]';
 var editor = eval('opener.' + 'clickableEditor');
 editor.performInsert(code);
 javascript:window.close()
        }
        // Ok, I don't handle the errors. An exercice for the reader.

        /* And now, we send the formdata */
        xhr.send(fd);
    }
</script>

<!-- Bla bla bla stuff ... -->

<style>
    body {text-align: center; background-color: #181817; overflow-x:hidden; overflow-y:auto;}
    div { background-color: rgb(43, 43, 43); border-bottom: 4px solid rgb(68, 68, 66); margin: -8px;}
 p {display: none}
    .uploading p {display: inline}
</style>
<br /><br />
<p><img src="images/loader.gif" border="0" /></p>

V3 API Version:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Upload to Imgur</title>
<div><img src="images/imgur.png" alt="" /></div>
<br /><br />
<button onclick="document.querySelector('input').click()">Select file...</button>
<input style="visibility:hidden;position:absolute;top:0;" type="file" onchange="upload(this.files[0])" accept="image/*">

<script>
    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.
        /* And now, we send the formdata */
        xhr.setRequestHeader('Authorization', 'Client-ID your key');
        xhr.send(fd);
    }
</script>

<!-- Bla bla bla stuff ... -->

<style>
    body {text-align: center; background-color: #181817; overflow-x:hidden; overflow-y:auto;}
    div { background-color: rgb(43, 43, 43); border-bottom: 4px solid rgb(68, 68, 66); margin: -8px;}
    p {display: none}
    .uploading p {display: inline}
</style>
<br /><br />
<p><img src="images/loader.gif" border="0" /></p>

2.1 - Change your key in imgur.php with key obtained in 1

3 - Copy loader.gif [attachment=28598] and imgur.png [attachment=28599] in images folder of your mybb installation.

4 - Copy imgurbut.png [attachment=28600] in jscripts/editor_themes/default/images/ and jscripts/editor_themes/office2007/images/

5 - Open jscripts/editor.js

5.1 - Find

{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},

5.2 - Add after

{type: 'button', name: 'imgur', insert: 'imgur', image: 'imgurbut.png', title: 'Upload to Imgur'},

5.3 - Find

insertIMG: function()
 {
 image = prompt(this.options.lang.enter_image, "http://");

 if(image)
 {
 this.performInsert("[img]"+image+"[/img]", "", true);
 }
 },

5.4 - Add after

insertImgur: function()
 {
 MyBB.popupWindow('imgur.php', 'imgur', 240, 200);
 },

5.5 - Find

case "image":
 this.insertIMG();
 break;

5.6 - Add after

case "imgur":
 this.insertImgur();
 break;

Credit: https://hacks.mozilla.org/category/drag-.../complete/
http://stackoverflow.com/questions/16951...javascript

Definitely useful, thanks!

Thanks mate, it's usefull Smile

That is so nice, thanks. Wink

great share

(2013-02-16, 07:14 AM)Yaldaram Wrote: [ -> ]Definitely useful, thanks!

(2013-02-16, 07:43 AM)Alone warrior Wrote: [ -> ]Thanks mate, it's usefull

(2013-02-16, 03:05 PM)Wolfseye Wrote: [ -> ]That is so nice, thanks.

(2013-02-16, 09:49 PM)king_og Wrote: [ -> ]great share

Thanks for feedback. Big Grin

Only thing I found was a little typo:

{type: 'button', name: 'imgur', insert: 'imgur', image: 'imgurbut.png', title: 'Upload to Imagur'},

(2013-02-17, 08:42 AM)king_og Wrote: [ -> ]Only thing I found was a little typo:

{type: 'button', name: 'imgur', insert: 'imgur', image: 'imgurbut.png', title: 'Upload to Imagur'},

Thank you. fixed. Big Grin

Thanks for sharing.

Thanks for sharing. Smile

Pages: 1 2 3 4 5 6 7 8

martec

Yaldaram

Alone warrior

Wolfseye

king_og

martec

king_og

martec

Max Payne

KRMFY