(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
