Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690

Uploads.im upload

$
0
0
1 - Create im.php in root

PHP Code:
<html>
<
head>
<
title>Upload to Uploads.im</title>
</
head>
</
html>
<
div><img src="images/imlogo.png" border="0" /></div>
<
br /><br />
<
button onclick="document.querySelector('input').click()">Select file...</button>
<
input style="visibility:hidden;position:absolute;top:0;" type="file" onchange="uploadim(this.files[0])">

<
script>
    function 
uploadim(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("upload"file); // Append the file
        
var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        
xhr.open("POST""http://uploads.im/api"); // Boooom!
        
xhr.onload = function() {
            var 
code '[img]' JSON.parse(xhr.responseText).data.img_url '[/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>

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

2 - Copy preload.gif
.gif  preload.gif (Size: 6.55 KB / Downloads: 35) and imlogo.png
.png  imlogo.png (Size: 5.97 KB / Downloads: 35) in images folder of your mybb installation.

3 - Copy im.png
.png  im.png (Size: 1.67 KB / Downloads: 35) in jscripts/editor_themes/default/images/ and jscripts/editor_themes/office2007/images/

4 - Open jscripts/editor.js

4.1 - Find

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

4.2 - Add after

Code:
{type: 'button', name: 'im', insert: 'im', image: 'im.png', title: 'Upload to Uploads.im'},

4.3 - Find

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

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

4.4 - Add after

Code:
insertIm: function()
    {
        MyBB.popupWindow('im.php', 'im', 240, 200);
    },

4.5 - Find

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

4.6 - Add after

Code:
case "im":
                this.insertIm();
                break;

Viewing all articles
Browse latest Browse all 690

Trending Articles