Forum Post Simple Image Upload Button

[DesignersSociety]

I want to create a button for the forum posts that you can simply click and it will upload to a server then paste right in the message(without needing two separate buttons). It only needs to be the simple image, nothing else fancy. Help with this would be very appreciated, note that I have pretty good knowledge of any html, css, and javascript so I could modify the code if needed(even snippets would help).

[SLGray]

So are you just looking for an image?

[DesignersSociety]

I want to basically add a button to the sceditor for uploading an image(that replaces the current two). It basically needs to do what both of them do automatically by letting them find the pic on their computer, uploading, then automatically pasting into the sceditor textarea.
I found this image host which offers an option, but it basically applies it to all the textareas on the site, which I don't want.
http://postimage.org/mod.php

[_Twisted_Mods_]

well if you want to do this yourself these two links should have everything you need

img upload script
https://help.forumotion.com/t139124-js-and-html-form-code

adding a button to editor

https://help.forumotion.com/t136169-warning-button-for-administrators-and-moderators


if you change your mind let me know and i will write it for you when i have time

[DesignersSociety]

Except that using filepicker means there's a bandwidth and such... These images can easily get a few hundred views each and aren't super small in size. Not to mention all the members will be uploading with this, so basically need somewhere bandwidth won't matter like postimage or servimg. I'm fine with servimg as the host, but they just need to automatically add the images in the post instead of just giving links after.

[_Twisted_Mods_]

yea think its like 500 img a month limit ..but anyways i dont know of any other ones and servimg opens in a frame which when trying to access its contents i get "Permission Denied" error, it's not possible to do a cross-origin request so don't really know of anything else

[DesignersSociety]

Alright, well the one I found from postimage.org grabs the image and pastes in the correct area, but like i said it appears on all the textareas... I tried changing that in the javascript but it doesn't seem to wanna work when I copy the actual javascript into my header with edits. Heres the js file and like i said when i just copy all that make edits and put directly on my site that won't work, i have to just use as a linked source. Maybe theres something in the code checking that i edit it or move it or something? http://mod.postimage.org/website-english-family.js

[_Twisted_Mods_]

have you tried creating a new script and using it like this

Code:

$(function(){
// MOD Title: Simple Image Upload
// MOD Author: Sium < admin@postimage.org > (N/A) http://postimage.org/
// MOD Version: 1.5.0

if(typeof postimage_lang==='undefined')
{
   var postimage_lang="english";
   var postimage_add_text="Add image to post";

function postimage_query_string(postimage_search_name){if(window.location.hash){postimage_query=window.location.hash.substring(1).split("&");for(postimage_i=0;postimage_i<postimage_query.length;postimage_i++){postimage_string_data=postimage_query[postimage_i].split("=");if(postimage_string_data[0]==postimage_search_name){postimage_string_data.shift();return unescape(postimage_string_data.join("="));}}}return void(0);}if(opener){var postimage_text=postimage_query_string("postimage_text");if(postimage_text){var postimage_id=postimage_query_string("postimage_id");var postimage_area=opener.document.getElementsByTagName('textarea');for(var postimage_i=0;postimage_i<postimage_area.length;postimage_i++){if(postimage_i==postimage_id){break;}}if(opener.editorHandlemessage && opener.editorHandlemessage.bRichTextEnabled){opener.editorHandlemessage.insertText(postimage_text+"<br /><br />",false);}else{postimage_area[postimage_i].value=postimage_area[postimage_i].value+postimage_text;}opener.focus();window.close();}}function postimage_insert(){var postimage_area=document.getElementsByTagName('textarea');for(var postimage_i=0;postimage_i<postimage_area.length;postimage_i++){if(!postimage_area[postimage_i].name.match(/username_list|search|recipients/i)){postimage_div=document.createElement('div');postimage_open=document.createElement('a');postimage_open.innerHTML=postimage_add_text;postimage_open.href="javascript:postimage_upload("+postimage_i+");";postimage_span=document.createElement('span');postimage_span.innerHTML=" • ";postimage_div.appendChild(document.createElement('br'));postimage_div.appendChild(postimage_span);postimage_div.appendChild(postimage_open);postimage_div.appendChild(document.createElement('br'));if(postimage_area[postimage_i].nextSibling){postimage_area[postimage_i].parentNode.insertBefore(postimage_div,postimage_area[postimage_i].nextSibling);}else{postimage_area[postimage_i].parentNode.appendChild(postimage_div);}}}}function postimage_upload(areaid){window.open("http://postimage.org/index.php?mode=website&areaid="+areaid+"&hash=1&lang="+postimage_lang+"&code=&content=family&forumurl="+escape(document.location.href),"postimage","resizable=yes,width=500,height=400");return void(0);}if(typeof postimage_text==='undefined'){if(window.addEventListener){window.addEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.attachEvent('onload',postimage_insert);}}}
});


[DesignersSociety]

Yes I already did but it didn't work. Never mind though I figured it out myself, thanks for your help