MyBB Community Forums

Full Version: Simple Image Upload
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
This does not require a plugin.

All this plugin does is add the following script to every page:

<script type='text/javascript' src='http://mod.postimage.org/mybb-english.js' charset='utf-8'></script>

Simply inserting this code into the template Show Thread -> showthread will accomplish exactly the same thing.



That being said, this seems to be a really nice add-on. Thanks for sharing Smile
Getting this error while uploading big images:-
[Image: fgghfg.png]
(2012-12-25, 08:25 AM)MSD Wrote: [ -> ]Getting this error while uploading big images:-
[Image: fgghfg.png]

That error has nothing to do with this plugin. Because it never actually uploads anything to your server. It uploads simply to postimage.org and returns the bb code for that image (in thumpnail size) back to the editor box.


Quote:This does not require a plugin.

All this plugin does is add the following script to every page:

PHP Code:
<script type='text/javascript' src='http://mod.postimage.org/mybb-english.js' charset='utf-8'></script>

Simply inserting this code into the template Show Thread -> showthread will accomplish exactly the same thing.


That being said, this seems to be a really nice add-on. Thanks for sharing Smile

Indeed its simply an adaptation. Of something that was possible without a plugin for ages. Still a plugin doing this vs doing it yourself is not always a bad thing i guess.
(2012-12-25, 01:02 PM)anori Wrote: [ -> ]Indeed its simply an adaptation. Of something that was possible without a plugin for ages. Still a plugin doing this vs doing it yourself is not always a bad thing i guess.

Quite true. I guess it is better for some, but I wouldn't want to waste a hook for something I can do with one line of code.
(2012-12-25, 02:31 PM)Wildcard Wrote: [ -> ]
(2012-12-25, 01:02 PM)anori Wrote: [ -> ]Indeed its simply an adaptation. Of something that was possible without a plugin for ages. Still a plugin doing this vs doing it yourself is not always a bad thing i guess.

Quite true. I guess it is better for some, but I wouldn't want to waste a hook for something I can do with one line of code.

One thing i will be looking at is envira's idea. I would really like that idea of:

- having the upload fields right in the editor.
- upload the images to the sites account
- upload the images to a folder with the username of the user
- add the user gallery postimage.org/gallery/galleryname/ to the profile of that user.
- add a new page to show all the galleries from the site account.

Would be a nice alternative to the traditional gallery.
I'd like to see something like this for a major image sharing service like imgur.com
(2012-12-26, 02:40 PM)Monaco Wrote: [ -> ]I'd like to see something like this for a major image sharing service like imgur.com

It is possible not sure how difficult it would be though:

http://api.imgur.com/
image upload option showing twice..Any fix?
(2012-12-27, 04:41 AM)anori Wrote: [ -> ]
(2012-12-26, 02:40 PM)Monaco Wrote: [ -> ]I'd like to see something like this for a major image sharing service like imgur.com

It is possible not sure how difficult it would be though:

http://api.imgur.com/

i use something this...

create image.php in root

<html>
<head>
<title>Image Upload</title>
</head>
</html>
<h1>Upload to imgur :</h1>
<br /><br />
<button onclick="document.querySelector('input').click()">Select file...</button>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">

<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
        fd.append("key", "your dev 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() {
            // Big win!
            document.querySelector("#link").innerHTML = '[img]' + JSON.parse(xhr.responseText).upload.links.original + '[/img]';
			document.querySelector("#img").innerHTML = '<img src="' + JSON.parse(xhr.responseText).upload.links.original + '" style="max-width:280px;max-height:280px;" border="0" />';
            document.body.className = "uploaded";
        }
        // 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; padding-top: 10px;}
    h1 { font-size: 18px; font-weight: bold; }
    div { }
    #link, p , div {display: none}
    div {display: inline-block;}
    .uploading div {display: none}
    .uploaded div {display: none}
    .uploading p {display: inline}
    .uploaded #link {display: inline}
	.uploaded #img {display: inline}
    em {position: absolute; bottom: 0; right: 0}
</style>
<br /><br />
<p>Uploading...</p>
<a id="link"></a>
<br /><br />
<a id="img"></a>

in your dev key change with your key

find {$smilieinserter} and add after code below in newthread, newreply etc .. templates

<p align="center"><a href="{$mybb->settings['bburl']}/image.php" onclick="return popup(this, 'notes')"><img src="your image" title="image upload" alt="image upload" border="0"/></a></p>

in "your image" change with something this http://i.imgur.com/8NjLBzR.png

in header template add

<script type="text/javascript">
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=325,height=550,scrollbars=no');
return false;
}
</script>

sorry but I do not remember the source of this
Everything working file. Upload done smoothly but how to insert it post? No option for inserting into post? Please help..I badly need this Imgur upload feature. Thanx in advance.
Pages: 1 2 3