All My Brain Where stuff from my brain lands

October 22, 2007

YUI Image Uploader Example with TurboGears

Filed under: Programming — Tags: , , , , , , , — Dennis @ 12:53 pm

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

  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
    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/
    def upload_image(self,img):
     cherrypy.response.headerMap['Content-Type'] = 'text/html' # fix IE
      f=open('%s/%d.jpg' % (upload_dir,myid),'wb')
      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.

I’ve created a PHP example of this too.

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


  1. I didn’t understand what is turbogears 🙁
    Can i do image uploader without this, just using javascript?

    Comment by Tremor — December 15, 2007 @ 6:35 am

  2. Turbogears is a web framework written in Python. I’ve done a few sites with it and so I used it to write this example. You can do image uploading on the client side with JavaScript but you’ll need some server functionality to handle/process the image. Any language will do really. There is an example written in PHP in the comments of my previous post on this topic.

    Comment by Dennis — December 15, 2007 @ 9:45 am

  3. Maybe you

    Comment by Matt — December 30, 2007 @ 3:44 am

  4. Maybe you will like this image uploader. It’s a beta I think:

    Comment by Matt — December 30, 2007 @ 3:44 am

  5. Hello Dennis,

    I need help. I need to do a multiple file select and upload them at one time. I downloaded YUI. I am using JSP, javascript, servelt.
    Can you send me any example for this as I see you have used YUI for implementing this. I searched a lot but I am unable to find one.

    Waiting for your reply, you could mail me at Thanks in advance!!


    Comment by Sarika — February 13, 2008 @ 2:31 pm

  6. […] Update: I've created another post that shows a working example here. […]

    Pingback by An Image Upload Extension for YUI Rich Text Editor | All My Brain — January 16, 2010 @ 3:44 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress

%d bloggers like this: