YUI Image Uploader Example with TurboGears

After completing the YUI Image Uploader, I received a lot of requests for a working example. I didn’t originally create a working example, because that requires server functionality that this server didn’t have. I’ve remedied the situation and have completed an example with TurboGears. Of course, any server side language or framework will do as long as you have the ability to upload and store an image.

Here we go:

1. Quickstart a new project

   tg-admin quickstart yuieditor

   Of couse, you could always add the editor to an existing project

2. Modify dev.cfg

   The uploader posts the contents of the YUI insert image form when it posts the image. There are parameters that are unneeded but TurboGears won’t allow that by default.

   # modify dev.cfg
tg.strict_parameters=False


3. Create an upload handler

   At the top of the controllers file, import packages and I added a variable to denote where to save the uploads:
   import os
import cherrypy
p=os.path.realpath('.')
upload_dir='%s/uploads' % p

   Then, add an upload handler. This implementation simply saves the files to a file in the upload directory under the next file_id name. I didn’t worry about id concurrency. I also haven’t worried about the content type of the image. For this example, the file type is simply assumed to be jpeg. I’ll leave handling different file types as an additional exercise. I personally use PIL to do that.
   # modify yuieditor/controllers.py
@expose()
def upload_image(self,img):
 cherrypy.response.headerMap['Content-Type'] = 'text/html' # fix IE
 try:
  file_id+=1
  myid=file_id
  data=img.file.read()
  f=open('%s/%d.jpg' % (upload_dir,myid),'wb')
  f.write(data)
  f.close()
 except:
  return '{status:"An Error Occurred uploading the image."}'
 return '{status:"UPLOADED",image_url:"/yuieditor/uploads/%d.jpg"}' % (myid)


4. Modify the index page to include the editor and uploader
   I simply copied all the javascript from the tutorial page to the index page and made minor modifications for the directory that I’m hosting the example at. You’re more than welcome to view the source on the example page.

That’s it.
Server Code Download: Example TurboGears YUI Upload Application.

Update:
I’ve created a PHP example of this too.

Update 02/17/10
No longer hosting the example.