14/Sep/2009 - Darren Dignam

Wyzz Image Uploading

Using imageshack.us API to add image-upload feature to wyzz

I created this page as the wyzz forum didnt like the ammout of code and/or links in my post!!!

Wyzz is a WYSIWYG editor implemented as javascript, its very lightweight, and FREE, check it out! The rest of this page is how I wanted a post to appear in the forum....

Hi, I have just started using wyzz. I like it a lot, its lightweight, and you can tweak it to how you like! I have been trying for a few days to use imageshack API for image uploading, and now I have it working, and working in wyzz too, I thought I would share my findings here with the community!
The principle behind my technique is based on iFrame AJAX (for that seamless user experience ;), and I have explained in detail on my blog the imageshack side of things:
http://www.blocsoft.com/blog/imageshack.asp
For my approach, you need a form, and a hidden iFrame (called AXframe, style="visibility:hidden"). I create the form in JS in my modified insertImage function:

function insertImage(n) {
global_n = n;
document.getElementById("imageform").innerHTML = "<form onsubmit=\"this.style.visibility='hidden';\" action=\"http://imageshack.us/redirect_api.php\" method=\"post\" target=\"AXframe\" enctype=\"multipart/form-data\"><span>Insert Image:</span> <input type=\"file\" name=\"media\"/><input type=\"hidden\" name=\"key\" value=\"YOUR_API_KEY\"><input type=\"hidden\" name=\"error_url\" value=\"http://example.com/imgerror.asp\"><input type=\"hidden\" name=\"success_url\" value=\"http://example.com/success.asp?1=%y&2=%u&3=%s&4=%b&5=%i\"> <input type=\"submit\" value=\"Upload Image\"><a href=\"#\" onclick=\"document.getElementById('imageform').style.display = 'none';\">Cancel</a><br><span style=\"font-size:60%;text-align:center;display:block;margin-bottom:-5px\">Images hosted by: <a target='_blank' href='http://www.imageshack.us'>imageshack.us</a></span></form>";
document.getElementById("imageform").style.display = 'block';
}

The form created looks like this:

<form onsubmit="this.style.visibility='hidden';" action="http://imageshack.us/redirect_api.php" method="post" target="AXframe" enctype="multipart/form-data">
<span>Insert Image:</span> <input type="file" name="media"/>
<input type="hidden" name="key" value="YOUR_API_KEY">
<input type="hidden" name="error_url" value="http://example.com/imgerror.asp">
<input type="hidden" name="success_url" value="http://example.com/success.asp?1=%y&2=%u&3=%s&4=%b&5=%i">
 <input type="submit" value="Upload Image">
<a href="#" onclick="document.getElementById('imageform').style.display = 'none';">Cancel</a>
<br><span style="font-size:60%;text-align:center;display:block;margin-bottom:-5px">Images hosted by: <a target='_blank' href='http://www.imageshack.us'>imageshack.us</a></span>
</form>

It looks nasty I know - sorry - this is still WIP! I had to use a global var global_n to remember which wyzz we are dealing with (I have only 1 wyzz editor on screen at any given time anyway, so i dont see a problem with this, if anyone can suggest a better way, im all ears!)
The form will hide itself when you submit the image, and the hidden iFrame performs the upload, on completion either an image URL is inserted into the wyzz window, or an error alert is generated. read my blog above for the details of how this works ;)
The imageshack API redirects to a page of your choosing on successful upload, and this page has javascript in it, that using global_n inserts the image, this is the code in my sucess.asp file (this could be done with PHP just as easily ;)

Success.asp

<%
      str1 = Request("1")
      str2 = Request("2")
      str3 = Request("3")
      str4 = Request("4")
      str5 = Request("5")  
%>
<script>
if (parent.browserName == "Microsoft Internet Explorer"||browserName == "Opera") {
	parent.document.getElementById("wysiwyg" + parent.global_n).contentWindow.focus();
	parent.document.getElementById("wysiwyg" + parent.global_n).contentWindow.document.execCommand("insertImage", false, "http://img<%=str3 %>.imageshack.us/img<%=str3 %>/<%=str4 %>/<%=str5 %>")
} else {
	parent.insertHTML('<img src="http://img<%=str3 %>.imageshack.us/img<%=str3 %>/<%=str4 %>/<%=str5 %>">', parent.global_n);
}
parent.document.getElementById('imageform').style.display = 'none';
</script>

FF and IE do things differently, hence the check. This code is a stripped down verison of what I am working on, so please feel free to post any errors I may have made. I have got this work!! And in due course I will link to an example. Please make any suggestions too!!! Darren

© 2009 BlocSoft.com All Rights Reserved. Contact