Image Hosting Feature

[jamesmarch]

Hello,

I have written a flash utility sits next to the editor box like smiles and lets you upload images to ImageShack.us and automatically inserts the generated thumbnail into the editor.

I need a little help integrating it into all the different types of editor modes vbulletin might use.

Here is a rundown of what I have so far. (Please keep in mind these code samples are only to help explain my integration with vbulletin)

Here is the swf object embed code.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  id="uploader"
  width="280"
  height="90"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
  <param name="movie" value="http://profile1.imageshack.us/jmarch/multiploader.swf" />
  <param name="quality" value="high" />
  <param name="allowScriptAccess" value="always" />
<embed
  src="http://profile1.imageshack.us/jmarch/multiploader.swf"
  quality="high"
  bgcolor="#ccc"
  name="uploader"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  flashvars="maxAllowedFileSize=13145728&callback=addImg2TextArea"
  AllowScriptAccess="always"
  align="middle"
  height="90"
  width="280">
</embed>
</object>

Here is the javascript.

function addImg2TextArea(imageData)
{
 var imageThumb;
 if (imageData.hasThumb) {
   imageThumb = "<a href='http://img" + imageData.imageServer + ".imageshack.us/my.php?image=" + imageData.imageName + "'><img src='http://img" + imageData.imageServer + ".imageshack.us/img" + imageData.imageServer + "/" + imageData.hashBucket + "/" + imageData.thumbName + "'></a>";
 }
vB_Editor['$editorid'].editdoc.body.innerHTML += imageThumb;

Example screenshot.


I put the Javascript function addImg2TextArea in the top of the editor_toolbar_on template
and i put the swf embed code in the editor_toolbar_on template somewhere around the editor box..

This is not a complete piece of work, but I think it is to a point where people can understand where I am trying to go with the project and offer constructive feedback to help improve the application.

How it works.

You select an image, and press upload, the image is sent to an imageshack server, once the image upload is complete, a user specified callback function fires that is passed an object that contains the name of the image and of the web server and the folder the image resides in.

imageData.hasThumb // Only images over specific resolution have thumbnail's generated
imageData.imageServer // Server number where image was uploaded
imageData.hashBucket // Folder on the server where image sits
imageData.thumbName // name of the file for the image thumbnail
imageData.imageName // name of the full sized image you uploaded on to server.

So as this is now, it seems to work, but only if you are logged in as admin.
Something changes with the wysiwyg editor mode when you switch from admin to normal user, and I am still trying to figure that out.

Any advice would be very welcome.

Some questions I have:
1. Would this be better written as a plugin/product?
2. Is there a better way to inject data into the editor?
3. Other ideal feature requests before we release this?