Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Imgur Avatar Upload
#1
1 - Create new stylesheet wit name "avtup.css" and add (repeat this step to all templates that you use)

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

.
avtup a span {
background-imagenone !important;
padding0px 3px 0px 6px;
padding-left3px !important;
color:rgb(858585);
}

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

.
avtup a {
background-imagenone !important;
padding0px 3px 0px 6px;
padding-left3px !important;
color:rgb(858585) !important;
text-decorationnone !important;
}

p.imgur {displaynone}

.
uploading p.imgur {displayinline

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

PHP Code:
<?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

PHP Code:
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
PHP Code:
{$headerinclude
5.2 - add after
PHP Code:
<script type="text/javascript" src="jscripts/avatarup.js"></script
5.3 - Find
PHP Code:
<td class="trow2" width="60%"><input type="text" class="textbox" name="avatarurl" size="45" value="{$avatarurl}/></td>
</
tr
5.4 - add after
PHP Code:
<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
Reply
#2
doesnt work last php code isnt right.
Reply
#3
Hi, this code works also on mybb 1.8.12? Thank you
Reply
#4
(07-21-2017, 06:34 PM)niere8 Wrote: Hi, this code works also on mybb 1.8.12? Thank you

With modification yes.
Reply
#5
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?
Reply
#6
Esta función es realmente útil Wink  TubeMate gratis
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)