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.

6 Responses to “YUI Image Uploader Example with TurboGears”


  1. Tremor

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

  2. Dennis

    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.

  3. Matt

    Maybe you

  4. Matt

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

    http://byonabi2.pgodker.com

  5. Sarika

    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 sakvk@yahoo.com. Thanks in advance!!

    Sarika

  6. An Image Upload Extension for YUI Rich Text Editor | All My Brain

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



css.php