Adding File Upload to the YUI Rich Text Editor’s Image Dialog

October 17, 2007 at 11:08 am by Eric Miraglia | In Development |

Dennis Muhlestein of AllMyBrain.com has posted a nifty integration of the YUI Rich Text Editor with the file upload feature of the YUI Connection Manager.

[The YUI] RTE has a great dialog for modifying images. You can’t use it to upload images from your computer however. So far, every situation I’ve needed an RTE has called for the ability to add images from the users hard drive. I’ve created an extension that modifies the RTE image dialog to include a new input for browsing to an image. It uses the Yahoo Connection manager to upload the image in the background to your server, and then displays the image in the RTE after the file is successfully uploaded.

Dennis’s uploader extension integrates with the existing image dialog, adding the requisite fields for file uploading:

Dennis's uploader integrates with the existing image placement dialog in YUI's RTE.

For more on Dennis’s RTE adaptation, check out his blog where he’s provided sample code and an uploader.js file (compatible with YUI 2.3.1) that allows you to add this to your own RTE implementation.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

9 Comments »

RSS feed for comments on this post. TrackBack URI

  1. This Dennis character seems to be right on his way to ruling the internet.

    Comment by Peggy Lund — October 17, 2007 #

  2. it’s weired we haven’t madw any picture uploading boxes that give the user the option to upload the image through his HD and through the net at the same box and to edit its size.

    it’s so without a doubt should be like this from anywhere.

    Comment by Niv Calderon — October 17, 2007 #

  3. there’s a typo in the URL for
    http://developer.yahoo.com/yui/connection/

    Comment by robert — October 18, 2007 #

  4. Thanks, Robert; fixed now. -Eric

    Comment by Eric Miraglia — October 18, 2007 #

  5. I’m not into yui recently, so just wondering does it provide upload progress bar (yet :-) ?

    Comment by Luka — October 19, 2007 #

  6. […] Adding File Upload to the YUI Rich Text Editor’s Image Dialog » Yahoo! User Interface Blog (tags: development) […]

    Pingback by eric.polerecky.com » Blog Archive » links for 2007-10-19 — October 19, 2007 #

  7. I’ve created a working example of this for those interested.

    http://allmybrain.com/2007/10/22/yui-image-uploader-example-with-turbogears/

    Comment by Dennis Muhlestein — October 22, 2007 #

  8. Dennis - Awesome! Thanks for sharing this. -Eric

    Comment by Eric Miraglia — October 22, 2007 #

  9. Yah… really good, but it doesnt really help me newbie to get it into the yui editor module for drupal… is no one able to do this?

    http://drupal.org/project/yui_editor

    Greetz from Europe

    Comment by XerraX — November 7, 2007 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Hosted by Yahoo!

Copyright © 2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.