Imageshack browser for message window

OK, the newer version of the Imageshack code I spoke of earlier is here but it is written specifically for the code in that thread. Check back this weekend and I'll rewrite it for general purpose use.

Give the following code a place in your global footer

<script type="text/javascript">
<!--
//Imageshack Uploader for Proboards
(function(){ var a,b,addIMG;
if((a=document.getElementsByName('message')) && a[0] && a[0].form && a[0].form.nextaction){
for(a=a[0].form.parentNode.getElementsByTagName('a'),b=0; b<a.length;b ++)
if(/javascript:(\w+?)\(.+?\[\/img\]/i.test(a[b].href)){
addIMG = a[b].parentNode.appendChild(document.createElement('a'));
addIMG.href = "javascript:"+ RegExp.$1 +"('[img\]','[\/img]')";
addIMG.title = "ImageShack Uploader";
addIMG.appendChild(document.createElement('img')).src="http://i51.tinypic.com/14wvazk.png";
addIMG.setAttribute('add',RegExp.$1);
break;}
if(!addIMG || !window.showPageSpan)return;
a = function(event){imageShackUploader.prompt(); event.returnValue=false; if(event.preventDefault)event.preventDefault(); return false;}
if(window.addEventListener)addIMG.addEventListener('click',a,false); else addIMG.attachEvent('onclick',a);
window.imageShackUploader = function( options ){
var defaultSettings = arguments.callee.settings,a; options = (options && "object" == typeof(options))?options:{}
var frm = '<div><a href="http://imageshack.us" target="_blank" style="float:left;"><h2>ImageShack® Uploader</h2></a>'
+'<img src="http://i51.tinypic.com/1z22h5j.gif" title="close popup" style="float:right;cursor:pointer" onclick="pageSpan.style.display=\'none\';pageSpan.innerHTML=\'\';" /></div>'
+'<img src="http://imageshack.us/img/imageshack.png" border="0" alt="Powered by ImageShack®" style="max-width:50px;" id="imageshacklogo" />'
+'<div id="imageuploadform" onmouseover="showPageSpan()">'
+'<form action="http://imageshack.us/redirect_api.php" method="post" enctype="multipart/form-data" target="imageuploadframe" name="imageshackuploader" onsubmit="this.submitbutton.disabled=true; setTimeout(function(){document.getElementById(\'imageuploadform\').innerHTML=\'<img src=\' + document.getElementById(\'imageuploadform\').getAttribute(\'progress\') + \' />\'},1000); ">'
+'<input name="key" type="hidden" value="32YWZFAP5ee8f0fce4b73a768bbd6ac4555f95a1" /><input name="success_url" type="hidden" value="'+location.protocol+'//'+location.host +'/index.cgi?tm='+ (+new Date) +'&action=viewthreadposts&viewurl=%u&file=%i&server=%s&bucket=%b" />'
+'<input name="error_url" type="hidden" value="'+location.protocol+'//'+location.host+'/index.cgi?action=viewthreadposts" />'
+'<input name="media" type="file" size="40"  /> <input name="submitbutton" type="submit" value="Host It" disabled="true" style="margin-left: 5px;" />'
+'</form></div><div style="display:none"><iframe name="imageuploadframe" id="imageuploadframe" src="'+ location.protocol+ '//'+location.host+'/index.cgi?action=viewthreadposts" ></iframe></div>';
window.hidePageSpan.uploader = function(){this();pageSpan.style.zIndex=1;pageSpan.innerHTML="";}
for(a in options) defaultSettings[a] = options[a];
if(defaultSettings.progressImage && /^https?:/i.test(defaultSettings.progressImage)){document.createElement('img').src=defaultSettings.progressImage;}
window.showPageSpan.msg = function(htm,opts){
loadPageSpan(opts.position,'',1,3);
if(window.removePageSpan)clearTimeout(removePageSpan);
pageSpan.onmouseover = pageSpan.onmouseout = null;
pageSpan.style.display=opts.display?opts.display:"block"; pageSpan.style.backgroundColor=opts.backgroundColor?opts.backgroundColor:"#FFFFBF"; pageSpan.style.zIndex=opts.zIndex?opts.zIndex:11; pageSpan.style.color=opts.color?opts.color:"#000";
pageSpan.innerHTML=htm;
//if(pageSpan.scrollIntoView)pageSpan.scrollIntoView();
}
window.showPageSpan.uploader = function(content){ content = content?content:frm
this.msg(content,({position:defaultSettings.target?defaultSettings.target:addIMG}))
if(document.imageshackuploader){
document.imageshackuploader.parentNode.setAttribute('progress', defaultSettings.progressImage);
document.imageshackuploader.media.onchange = function(){
if(/\.(gif|jpe?g|png|bmp)$/i.test(this.value))document.imageshackuploader.submitbutton.removeAttribute('disabled');else document.imageshackuploader.submitbutton.setAttribute('disabled',true);
if(this.files && this.files[0] && this.files[0].getAsDataURL)document.getElementById('imageshacklogo').setAttribute('src',this.files[this.files.length-1].getAsDataURL());
document.getElementById('imageuploadframe').onload = function(){
try{ var url=(this.contentWindow||frames[this.name]).location.href, b=window.add||window.ubbc;
if(/viewurl=(.+?)&file=(.+?)&server=(.+?)&bucket=(.+)/i.test(url)){
var viewurl=RegExp.$1,file=RegExp.$2,server=RegExp.$3,bucket=RegExp.$4;
b("[img"+"]http://img"+server+".imageshack.us/img"+server+"/"+bucket+"/"+file+"[/"+"img]")
}else if(/error=/i.test(url)){alert(decodeURIComponent(url.match(/message=([^&]+)/i)[1]));}
}catch(e){ }finally{if(window.pageSpan)pageSpan.style.display='none';}
}
}
}

//removePageSpan=setTimeout(window.hidePageSpan.uploader,60000); pageSpan.onblur = window.hidePageSpan.uploader;
}; if(options.mode!="init")window.showPageSpan.uploader();
}
window.imageShackUploader.settings = {
accept:'image/bmp,image/gif,image/jpeg,image/png',
progressImage: "http://www.iycatacombs.com/socal/resources/images/progress.gif" // created by The Infinite at Socal
}
window.imageShackUploader.prompt = function(event){
window.showPageSpan.msg(
'<div style="background-color:blue; width: 400px; height: 110px; padding-top:2px;">'
+'<img src="http://i51.tinypic.com/1z22h5j.gif" title="close popup" style="float:right;cursor:pointer;margin-right:7px;" onclick="pageSpan.style.display=\'none\';pageSpan.innerHTML=\'\';" />'
+'<span style="font-size:16px;font-weight:bold;">Insert an Image </span>'
+'<div style="margin: 10px 4px 4px; color:black; background: lightgray url(http://s2.images.proboards.com/question.gif) no-repeat fixed top left; padding-left:20px;">'
+'To upload an image from your computer files, click <b>Add Image</b>'
+'<br>or enter the URL to a previously uploaded image first'
+'<br><nobr>Image URL: <input type="text" size="40" id="imageshackURL"/></nobr>'
+'<br><div align="center" style="padding-top:4px;"><input type="button" value="Add Image" id="imageshackUpload"/></div>'
+'</div></div>'
,{position:imageShackUploader.settings.target?imageShackUploader.settings.target:addIMG}
);
document.getElementById('imageshackUpload').onclick = function(event){
if(/^http.+?\.(gif|jpe?g|png|bmp)$/i.test(document.getElementById('imageshackURL').value)){
window[addIMG.getAttribute('add')].call(addIMG,'[img\]'+document.getElementById('imageshackURL').value,'[/img\]')
}else if(document.getElementById('imageshackURL').value!=""){
alert('Unsupported file type or bad URL\nPlease try again');
document.getElementById('imageshackURL').value="";
}else{window.showPageSpan.uploader();}
}
return false
}
imageShackUploader({mode:"init"});
}
})();
// -->
</script>

I made some preliminary tests to see if there were any functional problems in Internet Explorer, Firefox, Chrome, Safari and Opera and fixed a couple in Chrome/Safari. The UI will be improved when I find the time but in all other aspects it works as intended.

Once installed you should see a new imageshack UBBC button when posting .
Clicking it should give you this dialog

where you can either enter the url to an existing image (no upload necessary) or leave it blank and click the Add Image button to go to the upload dialog


Note also that there is an old bug in Firefox (356558) which prevents uploading more than one pic unless you preview after each upload
(fixed)
Edits:

• Updated code with a Firefox bug workaround and also added traps for a few more error scenarios.
  

I'm unable to reproduce what you're describing, what browser are you using? Also could you copy the exact URL from your browser window on the page where you are seeing the progress bar just sitting there and also, if you can, give the size of the file you're trying to upload?

I've made a few modifications mainly for the aforementioned Firefox bug so recopy the updated code and give it a try.

What you're describing could only happen if the onload event is not firing so the above information I asked for (browser and url) are crucial to diagnosis.

Update: I found a guest postable area in your custom domain forum and after numerous configuration changes was able to reproduce the described problem but only in FIREFOX. Apparently there are quite a few Firefox addons such as noScript , requestPolicy , webdeveloper, etc. that add an extra layer of redirection confirmation (e.g "this webpage is redirecting to ...blah blah.Do you want to continue?"). Playing around with these finally got the problem reproduced for me. In the case of requestPolicy setting a whitelist in that addon for the origin-to-domain (imageshack.us to www.spiritspathway.co.uk) got rid of the problem (noScript has a similar whitelist in its UI if I remember correctly but webdeveloper requires direct editing in about:config).
The option in Firefox's advanced tab regarding redirection doesn't seem to have an affect here, perhaps preempted by the addons or more likely only applies to meta redirects rather than http redirects.
Assuming you are using Firefox (can't tell from picture), try running it in -safe-mode with all addons disabled to see if the problem persists, if not then it's one of your addons causing this issue. Re-enable one at a time until the problem resurfaces, could be more than one so don't stop.
Chrome, Safari, Opera and IE worked on the custom domain without problems and all worked with the standard domain (http://spiritspathway.proboards.com/)

That's not Internet Explorer 6 by any chance?

Could you try running your IE8 with all add-ons disabled

Click the Start button, click All Programs, click Accessories, click System Tools, and then click Internet Explorer (No Add-ons)

Try it in that bare-bones mode and see if it makes a difference since I no longer have access to IE8 and simply cannot get IE9 (running in IE8 and IE7 mode) to reproduce what you're describing.

I think I have narrowed it down to onload failure to fire in versions of IE older than IE9 but I have to get my hands on an older version of IE (6/7/8) before finalizing the updated code...

Update: Thanks to help from SubDevo and Wormo I think I have it working for versions of IE older than IE9, replace it with this version
<script>
//Imageshack Uploader for Proboards
(function(){ var a,b,addIMG;
if((a=document.getElementsByName('message')) && a[0] && a[0].form && a[0].form.nextaction){
for(a=a[0].form.parentNode.getElementsByTagName('a'),b=0; b<a.length;b ++)
if(/javascript:(\w+?)\(.+?\[\/img\]/i.test(a[b].href)){
addIMG = a[b].parentNode.appendChild(document.createElement('a'));
addIMG.href = "javascript:"+ RegExp.$1 +"('[img\]','[\/img]')";
addIMG.title = "ImageShack Uploader";
addIMG.appendChild(document.createElement('img')).src="http://i51.tinypic.com/14wvazk.png";
addIMG.setAttribute('add',RegExp.$1);
break;}
if(!addIMG || !window.showPageSpan)return;
a = function(event){imageShackUploader.prompt(); event.returnValue=false; if(event.preventDefault)event.preventDefault(); return false;}
if(window.addEventListener)addIMG.addEventListener('click',a,false); else addIMG.attachEvent('onclick',a);
window.imageShackUploader = function( options ){
var defaultSettings = arguments.callee.settings,a; options = (options && "object" == typeof(options))?options:{}
var frm = '<div><a href="http://imageshack.us" target="_blank" style="float:left;"><h2>ImageShack® Uploader</h2></a>'
+'<img src="http://i51.tinypic.com/1z22h5j.gif" title="close popup" style="float:right;cursor:pointer" onclick="pageSpan.style.display=\'none\';pageSpan.innerHTML=\'\';" /></div>'
+'<img src="http://imageshack.us/img/imageshack.png" border="0" alt="Powered by ImageShack®" style="max-width:50px;" id="imageshacklogo" />'
+'<div id="imageuploadform" onmouseover="showPageSpan()">'
+'<form action="http://imageshack.us/redirect_api.php" method="post" enctype="multipart/form-data" target="imageuploadframe" name="imageshackuploader" onsubmit="this.submitbutton.disabled=true; setTimeout(function(){document.getElementById(\'imageuploadform\').innerHTML=\'<img src=\' + document.getElementById(\'imageuploadform\').getAttribute(\'progress\') + \' />\'},1000); ">'
+'<input name="key" type="hidden" value="32YWZFAP5ee8f0fce4b73a768bbd6ac4555f95a1" /><input name="success_url" type="hidden" value="'+location.protocol+'//'+location.host +'/index.cgi?tm='+ (+new Date) +'&action=viewthreadposts&viewurl=%u&file=%i&server=%s&bucket=%b" />'
+'<input name="error_url" type="hidden" value="'+location.protocol+'//'+location.host+'/index.cgi?action=viewthreadposts" />'
+'<input name="media" type="file" size="40"  /> <input name="submitbutton" type="submit" value="Host It" disabled="true" style="margin-left: 5px;" />'
+'</form></div><div style="width:1px; height:1px; overflow:hidden;"><iframe name="imageuploadframe" id="imageuploadframe" src="about:blank" ></iframe></div>';
window.hidePageSpan.uploader = function(){this();pageSpan.style.zIndex=1;pageSpan.innerHTML="";}
for(a in options) defaultSettings[a] = options[a];
if(defaultSettings.progressImage && /^http:/i.test(defaultSettings.progressImage)){document.createElement('img').src=defaultSettings.progressImage;}
window.showPageSpan.msg = function(htm,opts){
loadPageSpan(opts.position,'',1,3);
if(window.removePageSpan)clearTimeout(removePageSpan);
pageSpan.onmouseover = pageSpan.onmouseout = null;
pageSpan.style.display=opts.display?opts.display:"block"; pageSpan.style.backgroundColor=opts.backgroundColor?opts.backgroundColor:"#FFFFBF"; pageSpan.style.zIndex=opts.zIndex?opts.zIndex:11; pageSpan.style.color=opts.color?opts.color:"#000";
pageSpan.innerHTML=htm;
//if(pageSpan.scrollIntoView)pageSpan.scrollIntoView();
}
window.showPageSpan.uploader = function(content){ content = content?content:frm
this.msg(content,({position:defaultSettings.target?defaultSettings.target:addIMG}))
if(document.imageshackuploader){
document.imageshackuploader.parentNode.setAttribute('progress', defaultSettings.progressImage);
document.imageshackuploader.media.onchange =  function(){
if(/\.(gif|jpe?g|png|bmp)$/i.test(this.value))document.imageshackuploader.submitbutton.removeAttribute('disabled');else document.imageshackuploader.submitbutton.setAttribute('disabled',true);
if(this.files && this.files[0] && this.files[0].getAsDataURL)document.getElementById('imageshacklogo').setAttribute('src',this.files[this.files.length-1].getAsDataURL());
//document.getElementById('imageuploadframe').onload =
var ev = window.showPageSpan.uploader.hLoadIframe;
if(document.getElementById('imageuploadframe').attachEvent){
document.getElementById('imageuploadframe').detachEvent('onload', ev);
document.getElementById('imageuploadframe').attachEvent('onload',ev);
}else{
document.getElementById('imageuploadframe').removeEventListener('load', ev, false);
document.getElementById('imageuploadframe').addEventListener('load',ev, false);
}
}
}

//removePageSpan=setTimeout(window.hidePageSpan.uploader,60000); pageSpan.onblur = window.hidePageSpan.uploader;
};
window.showPageSpan.uploader.hLoadIframe = function(event){
try{ var thiss = (event.target||window.event.srcElement),url=(thiss.contentWindow||thiss.contentDocument.parentWindow||frames[thiss.name]).location.href, b=window.add||window.ubbc;
if(/viewurl=(.+?)&file=(.+?)&server=(.+?)&bucket=(.+)/i.test(url)){
var viewurl=RegExp.$1,file=RegExp.$2,server=RegExp.$3,bucket=RegExp.$4;
b("[img"+"]http://img"+server+".imageshack.us/img"+server+"/"+bucket+"/"+file+"[/"+"img]")
}else if(/error=/i.test(url)){alert(decodeURIComponent(url.match(/message=([^&]+)/i)[1]));}
}catch(e){}finally{if(window.pageSpan)pageSpan.style.display='none';}
return true;
}
if(options.mode!="init")window.showPageSpan.uploader();
}
window.imageShackUploader.settings = {
accept:'image/bmp,image/gif,image/jpeg,image/png',
progressImage: "http://www.iycatacombs.com/socal/resources/images/progress.gif" // created by The Infinite at Socal
}
window.imageShackUploader.prompt = function(event){
window.showPageSpan.msg(
'<div style="background-color:blue; width: 400px; height: 110px; padding-top:2px; box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75); -o-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75); -webkit-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75); -moz-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);">'
+'<img src="http://i51.tinypic.com/1z22h5j.gif" title="close popup" style="float:right;cursor:pointer;margin-right:7px;" onclick="pageSpan.style.display=\'none\';pageSpan.innerHTML=\'\';" />'
+'<span style="font-size:16px;font-weight:bold;">Insert an Image </span>'
+'<div style="margin: 10px 4px 4px; color:black; background: lightgray url(http://s2.images.proboards.com/question.gif) no-repeat fixed top left; padding-left:20px;">'
+'To upload an image from your computer files, click <b>Add Image</b>'
+'<br>or enter the URL to a previously uploaded image first'
+'<br><nobr>Image URL: <input type="text" size="40" id="imageshackURL"/></nobr>'
+'<br><div align="center" style="padding-top:4px;"><input type="button" value="Add Image" id="imageshackUpload"/></div>'
+'</div></div>'
,{position:imageShackUploader.settings.target?imageShackUploader.settings.target:addIMG}
);
document.getElementById('imageshackUpload').onclick = function(event){
if(/^http.+?\.(gif|jpe?g|png|bmp)$/i.test(document.getElementById('imageshackURL').value)){
window[addIMG.getAttribute('add')].call(addIMG,'[img\]'+document.getElementById('imageshackURL').value,'[/img\]')
}else if(document.getElementById('imageshackURL').value!=""){
alert('Unsupported file type or bad URL\nPlease try again');
document.getElementById('imageshackURL').value="";
}else{window.showPageSpan.uploader();}
}
return false
}
imageShackUploader({mode:"init"});
}
})();
</script>