MyBB Community Forums
Imgur Avatar Upload - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Imgur Avatar Upload (/thread-154294.html)



Imgur Avatar Upload - martec - 2014-06-01

1 - Create new stylesheet wit name "avtup.css" and add (repeat this step to all templates that you use)

.avtup {
display:inline-block;
padding:1.5px 5px;
margin:2px;
font-size:11px;
background:#eee;
border:1px solid #ccc;
color:#555;
border-radius: 6px 6px 6px 6px;
}

.avtup a span {
background-image: none !important;
padding: 0px 3px 0px 6px;
padding-left: 3px !important;
color:rgb(85, 85, 85);
}

.avtup:hover {
border-color: #bbb !important;
}

.avtup a {
background-image: none !important;
padding: 0px 3px 0px 6px;
padding-left: 3px !important;
color:rgb(85, 85, 85) !important;
text-decoration: none !important;
}

p.imgur {display: none}

.uploading p.imgur {display: inline}

2 - Creater new file using Notepad++ with name avatarup.php and add

<?php 
// Disallow direct access to this file for security reasons
if(!defined("IN_MYBB"))
{
	die("Direct initialization of this file is not allowed.<br /><br />Please make sure IN_MYBB is defined.");
}

// Plugin info
function avatarup_info ()
{
	return array(
		"name"			=> "avatarup",
		"description"	=> "avatarup",
		"website"		=> "avatarup",
		"author"		=> "avatarup",
		"authorsite"	=> "avatarup",
		"version"		=> "avatarup",
		"guid" 			=> "avatarup",
		"compatibility" => "16*"
	);
}

$plugins->add_hook("usercp_do_avatar_start", "avatarup_start");
function avatarup_start()
{
    global $mybb;
	
	if($mybb->input['imgurup'])
    {
		$file = "http://i.imgur.com/{$mybb->input['imgur']}";
		$contentLength = strlen(@file_get_contents($file));
		if ($contentLength < 65000) {
			$mybb->input['avatarurl'] = "http://i.imgur.com/{$mybb->input['imgur']}";
		}
		else {
			error("The image size exceeds the allowed limit of 65kb.");
		}
	}
}
?>

2.1 - You can change 65000 with value you want. 65000 limit to 65 KB to upload.
2.2 - Upload avatarup.php to plugin folder and active the plugin

3 - Get imgur api key: https://imgur.com/register/api_anon (if you already has key, skip this step)

4 - Creater new file using Notepad++ with name avatarup.js and add

    window.ondragover = function(e) {e.preventDefault()}
    window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
    function uploadavt(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 = JSON.parse(xhr.responseText).data.link;
		        var regExp = "/i.imgur.com/([^_]+)/?";
                var match = code.match(regExp);
	            if (match&&match[1]){
                code = match[1];}
			document.getElementById('imgur').value += code;
document.getElementById('imgur2').style.display = "none";
        }
        // Ok, I don't handle the errors. An exercice for the reader.
        xhr.setRequestHeader('Authorization', 'Client-ID yourid');
        /* And now, we send the formdata */
        xhr.send(fd);
    }
4.1 - Change yourid with key obtained in 3
4.2 - Upload avatarup.js to root/jscripts folder

5 - Open and edit usercp_avatar template
5.1 - Find
{$headerinclude}
5.2 - add after
<script type="text/javascript" src="jscripts/avatarup.js"></script>
5.3 - Find
<td class="trow2" width="60%"><input type="text" class="textbox" name="avatarurl" size="45" value="{$avatarurl}" /></td>
</tr>
5.4 - add after
<tr>
<td class="trow1" width="40%"><strong>Imgur:</strong></td>
<td class="trow1" width="60%">
<form enctype="multipart/form-data" action="usercp.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
http://i.imgur.com/<input type="text" id="imgur" class="textbox" name="imgur" size="30" value="" /> <span class="avtup"><a href="javascript:void(0)" onclick="document.querySelector('input.imgur').click()"  title="Upload to Imgur"><span>Select file...</span></a></span><input class="imgur" style="visibility: collapse; width: 0px;" type="file" onchange="uploadavt(this.files[0])"> <p id="imgur2" class="imgur"><img src="images/spinner.gif" border="0" /></p>  <input type="checkbox" name="imgurup" value="1" /> Use Imgur.
</td>
</tr>

http://i.imgur.com/VD5YhHF.png


RE: Imgur Avatar Upload - TechPony11 - 2015-11-30

doesnt work last php code isnt right.


RE: Imgur Avatar Upload - niere8 - 2017-07-21

Hi, this code works also on mybb 1.8.12? Thank you


RE: Imgur Avatar Upload - martec - 2017-07-22

(2017-07-21, 06:34 PM)niere8 Wrote: Hi, this code works also on mybb 1.8.12? Thank you

With modification yes.


RE: Imgur Avatar Upload - niere8 - 2017-07-22

Thank youuuu, it works!! :*

Only another question: is possible use it also like preview image thread?

For this: https://community.mybb.com/thread-211875.html

Thank you

And the last thing (I promise, I will send you a donation, for what I can in this moment Sad ),
if you could add also an upload via url (image on the web), in addition to upload a file from your computer,
like on imgur: https://imgur.com/

Thank you very much again,
If I could finally solve this big problem about images, it would be a big deal for me.
I have to reinstall the server for a suspected malware (and also password of my vps doesn't work more..and other problems), but every time downloading and uploading hundreds of images (even big sizes), uploaded from users on the server is a big problem.
In this way everything is uploaded to the imgur and I can quickly run my server without the image problem, right?


RE: Imgur Avatar Upload - kidgabi - 2017-09-05

Esta función es realmente útil Wink  TubeMate gratis