14/Sep/2009 - Darren Dignam

AJAX imageshack uploading

Using an iFrame, javascript, and ASP

Click here to see a working example

I recently needed to add an image upload to a project im working on, and decided to use the imageshack API. Their documentation was pretty sketchy, I managed to upload files, but was unable to parse the XML doc in my iFrame (due to cross-site-scripting security). I googled and found some other people using the API. One was a C# class, and the other was a PHP class. Both looked promising, but here is what I did.... this could have easily been done in PHP instead of ASP...

My method involves the lesser known imageshack redirect API and the iFrame AJAX technique. I know about the XMLHttpRequest object, but this wont work with image uploads.

For my approach you will need three files:

  1. One with the form and iFrame
  2. One that will handle the successful upload response from imageshack
  3. One to handle a failed upload attempt
You will also need to obtain a developer key from imageshack (look here). Lets take a look at the first file. This will have a form that submits post data to imageshack, and is targeted at an iFrame. There are some additional divs to display results from the upload. The markup looks like this:

index.asp

<html>
  <head>
    <title>AJAX image upload</title>
  </head>
  <body>
    <form action="http://imageshack.us/redirect_api.php" target="AXframe" method="post" enctype="multipart/form-data">
      <input type="file" name="media"/>
      <input type="hidden" name="key" value="YOUR_DEVELOPER_KEY">
      <input type="hidden" name="error_url" value="http://example.com/error.asp">
      <input type="hidden" name="success_url" value="http://example.com/success.asp?one=%y&two=%u&three=%s&four=%b&five=%i">
      <input type="submit"/>
    </form>
    <iframe style="visibility:hidden" id="AXframe" name="AXframe"></iframe>
    <div id="link"></div>
    <div id="yfrog"></div>
    <div id="image"></div>
  </body>
</html>

From the API documentation, I have constructed the form above. Notice the form action and target. And note the values of the hidden fields, these are the next files we need to create. When an image is selected and submitted, it is uploaded to imageshack invisibly with the iFrame, and imageshack then redirect to your chosen pages. If the upload was successful then the success page is called with everything we need in the querystring (that's why there are place holder [ie: %y] characters in the success_url, imageshack uses these in the redirect).

success.asp

<%
  str1 = Request("one")
  str2 = Request("two")
  str3 = Request("three")
  str4 = Request("four")
  str5 = Request("five")
%>
<script type="text/javascript">
  parent.document.getElementById('yfrog').innerHTML =  '<%=str1 %>';
  parent.document.getElementById('link').innerHTML = '<%=str2 %>';
  parent.document.getElementById('image').innerHTML = '<img src="http://img<%=str3 %>.imageshack.us/img<%=str3 %>/<%=str4 %>/<%=str5 %>">';
</script>

This simple ASP file shows how easy this method is. You get some values from the querystring, and you format an image URL. In this example the uploaded image will be displayed in the DIV with an id of image. In your own website you might want to do something more useful here.

error.asp

<script type="text/javascript">
  alert("There was an error uploading the file.");
</script>

The error file is even simpler! We just show an alert popup.

This has been tested on all major browsers, and as long as your files are all located on the same domain, you wont have a problem with XSS.

Conclusion

Click here to see a working example

The example presented here is intentionally simple, and as such has some flaws. What happens say, if you attempt to upload a second file before the first has finished? Some easy ways to improve the process would be to dynamically create the form and iFrame when your user wants to upload an image. You could also use javascript to hide the form, and show a loading gif while the upload takes place (using the forms onsubmit event is good for this). The success.asp file could also interact with a database depending on your requirements. You can also pass information from the index page to the success/error pages. In the hidden inputs on the form, where you assign your success/error pages, just include extra querystring values with the data you need to pass, like the user ID of the uploader so you can record their uploads into a database for instance.

The information returned from imageshack with this API is not as complete as the XML method, but is easier to accomplish. Also, Imageshack will create thumbnails for images larger than 200px square. Now this API wont return the address of the thumbnail, but you can easily compute it. The address is the same as that for the image, but the file extension is example.th.jpg instead of example.jpg (or .th.gif or .th.png ect)




Comments:

Updated Example
Darren - 9/14/2009 1:42:07 PM
I have updated the success.asp page in the example to show the computed thumbnail.
  //thumbnail code
  tmp1 = IMAGE_ADDRESS;
  tmp2 = tmp1.replace(/.jpg/i, ".th.jpg");
  tmp2 = tmp2.replace(/.gif/i, ".th.gif");
  tmp2 = tmp2.replace(/.png/i, ".th.png");
  document.getElementById('thumb').innerHTML = tmp2;
This lazy approach just uses the javascript replace function to insert the .th needed.

 (*required)
 (*private)
 (*required)
 
© 2009 BlocSoft.com All Rights Reserved. Contact