Example Image Upload with YUI Rich Text Editor 2.7.0

It's somewhat slow coming, but I've checked compatibility with the image uploader and YUI version 2.7.0. If you haven't read the original YUI Image Uploader page, start there. After that, you can use this page for an example getting the script to work with the latest YUI.

The 2.6 image uploader is compatible with Editor 2.7 as far as I can tell. All you need to do is update the included JavaScript files to point to the new 2.7 editor and you should be fine. For reference, here is the yui-image-uploader26.js file.

I've checked functionality on this page with Safari (4), Firefox (3), and Internet Explorer 7 (Actually, it worked on IE 6 too). If you're having a problem and it isn't working on this page, feel free to leave a comment with your error.


Here is the initialization JavaScript for the editor on this page. You can find information on Yahoo's Rich text editor here.

  1.  
  2. <!-- Skin CSS file -->
  3. <link rel="stylesheet" type="text/css"
  4. href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
  5. <!-- Utility Dependencies -->
  6. <script type="text/javascript"
  7. src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  8. <script type="text/javascript"
  9. src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
  10. <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
  11. <script src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
  12. <script src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
  13. <script src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
  14. <!-- Source file for Rich Text Editor-->
  15. <script src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
  16. <script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
  17. <script src="/wp-content/uploads/2007/10/yui-image-uploader26.js"></script>
  18. <script type="text/javascript">
  19. var myEditor = new YAHOO.widget.Editor('example_editor', {
  20. height: '300px',
  21. width: '522px',
  22. dompath: true,
  23. animate: true
  24. });
  25. yuiImgUploader(myEditor, 'example_editor',
  26. '/wp-content/uploads/2007/12/yui_img_uploader.php','image');
  27. myEditor.render();
  28. </script>
  29.  

I left the server side image upload script the same as with previous versions of this script.

Feel free to leave a comment or contact me if you have questions or suggestions.

43 Responses to “Example Image Upload with YUI Rich Text Editor 2.7.0”


  1. jbrennon

    Hey there I am just trying to get this image uploader working. And am having some troubles. When I alert the ee.message close to the end of the js file I get the error

    Result of expression ‘Dom.getAncestorByTagName(img_elem, ‘form’)’ [null] is not an object.

    I tried looking into it, but I don’t even know where to begin. Thanks!

  2. Ibrahima

    I have been trying to use your script using YUI 2.7. But the upload label and the browse button did not show. I looked at the script, and I found that if you comment this line: Dom.getAncestorByTagName(img_elem, ‘form’).encoding = ‘multipart/form-data’; they will show. Do you know, what is going on here.

  3. kreviii

    Great solution you’ve made! I’ve almost got my own version working.

    Trying to solve why does it not load the image into the editor, when it DOES load it to the server?

    is there anything specific I look for , there seems to be maybe and issue with the path variable that gets passed back, im thinking.

    is it okay to use ‘http://localhost.com/’ . $Path for example?

    thanks for the great addition to the YUI !

    cheers

  4. don.i.buchanan

    kreviii, fire up firebug and watch the requests for what’s happening. Its likely that you’re not returning the appropriate json fragment for the ImageUpload to read.
    Oh it firebug doesn’t recognize it as an XHR request because of the whole iframe thing, i think.

  5. Dennis

    Jbrennon & Ibrahima: Can you give more details? Which browser are you trying. It’s working for me with all major browsers on all platforms I’ve tested so far. I can’t say I’ve hit every possible combination though. Like Don just said: Firebug is your friend.

  6. Chaman

    @Jbrennon & Ibrahima: You might need FORM tags around your textarea with enctype=”multipart/form-data”

  7. Yot

    can I change default font size to 12px?

  8. Dennis

    I’m not sure which font size you’re referring to, but pretty much everything is customizable with the correct style sheets. Use Firefox/Firebug to find out which style sheet is controlling the element you are interested in.

  9. kashif jamil

    can anyone give me php code into asp.net(VB) format

    Thanks

  10. Yot

    Thank you Dennis. I found it in file ‘editer-min.js’.

  11. Ed

    Hello. I am trying to use the 2.7 version, but am receiving an error which is preventing the upload of the image to my server. Specifically:

    this._formNode.submit is not a function

    line 8 of connection-min.js

    Any ideas?

    I know my upload PHP script is working fine because I can post directly to it and it indeed uploads the image, but the YUI RTE w/image upload component is breaking before it ever sends the image.

    Thanks in advance,
    Ed

  12. Dennis

    Does your browser work on this site’s example?

  13. mjw

    Having trouble with this on Safari with YUI 2.8r4. Works fine in Firefox though. Going to try 2.7, I’ll report back.

  14. mjw

    Figured out my problem. I’m using Java and Stripes instead of PHP, and I’m not sure if that’s the reason, but my upload was returning the JSON with a modified pre tag:

    {“image_url”:”/imageUpload.action?fetch=&fileName=15.gif”,”status”:”UPLOADED”}

    This wasn’t being stripped properly so I changed one line to fix it:

    // strip pre tags if they got added somehow resp=r.responseText.substring(r.responseText.indexOf(“{“), r.responseText.lastIndexOf(“}”)+1);

  15. Ed

    Hi Dennis, thanks for the reply. Yes – your sample here on the site works fine. If you’re willing to take a look I would be happy to send you the URL’s – I can’t post them publicly, however.

  16. Eelko

    Hello,
    I’m having problems with the image-uploader on the yui editor (version 2.7.0)
    When I upload an image, I get a correct JSON response from my server-side PHP script. I see the script put the correct URL in the ‘_insertimage_url’ field (placed temporary alert to check) but after the double focus() the content of the ‘_insertimage_url’ field changed again to the original value ‘Image URL Here’. Because of this no image is shown in the editor.
    Does anyone know how to fix this?

    Thanks in advance,
    Eelko

  17. Dennis

    Do the examples on this site work for you? Make sure your server is serving the image at the directory returned by your JSON response. I always use FireFox/FireBug to see what is going on.

  18. Eelko

    Yes the sample on this page works fine.

  19. karim

    I tried using the script with 2.6 it didn’t upload with 2.7 i don’t see the browse button so i’m blocked here i can’t use the 2.6 nor the 2.7. although i followed your step copy & pasted & changed what we have to change
    any help

  20. Dennis

    Does it work on this site for you?

  21. Ed

    To anyone who encounters the “this._formNode.submit is not a function” error note that your form submit button must not be named “submit”. Cheers!

  22. Mostyn Web Solutions

    Hi Dennis,

    First of all thanks for your code, image upload directly into a rich text editor is an essential feature.

    I have written some ASP.net code that implements what you have written. It would be great if you could post it on your site. The URL is http://www.mostynwebsolutions.com/Yui-Image-Uploader-ASP-DOT-NET.aspx

    Thanks and Regards,

    Tom

  23. Dennis

    I’ll add a post thanks!

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

    […] Update 07/01/09: I've added a working example with the 2.6 uploader and YUI 2.7. YUI 2.7 Image Uploader […]

  25. Andre M

    By using Firefox 3.5.7 with Noscript extension (1.9.9.36) installed and disabled on current page, the image doesn’t seem to upload and does not appear on YUI Editor. If I set “allow scripts globally” it doesn’t work either. However, if I disable Noscript extension, it works fine. Any ideas?

  26. Jamie

    I would be interested to know if this image uploader is something that the forum script IPB could use?

    This is exactly how uploading images should work and I would gladly paid anyone that is able to write this up as a Mod for IPB.

    Thanks,
    Jamie

  27. Dennis

    Free for anyone to use. Check the latest posts, there is a github code repository now.

  28. Kethlak

    I’m having the same problem as Eelko. This page works fine in my browser, but I made an almost exact copy of it on my own server and the actual url of the image is being overwritten by “Image URL Here” after the successful upload. Any idea why or how to fix it?

  29. Kethlak

    I fixed the problem. It seems to have been because I was using the server’s “path”, which is a long and complicated folder that php recognized to upload to but the javascript couldn’t load the image from (it wasn’t relative to the site location).

  30. Josh Cheek

    Using this with Rails 2, storing the images on Amazon S3 with Paperclip and ActiveRecord. Here is a gist showing how I set up the back end. http://gist.github.com/443394

  31. Dennis

    Glad it’s working for you. Can I add your example to the contrib folder?

  32. Josh Cheek

    Absolutely 🙂 Hope it helps someone.

  33. MarriageMan

    I’d love to have this as a mod for an SMF forum. And a PHPBB forum.

  34. TomasM

    I notice when I resize an image that has been uploaded, I lose the handles/controls to resize again – I have to click OFF the image and then click back ON to get the handles back. I notice that if I also resize the image (so it loses the handles but somehow still has the image somewhat selected) and try to click on the toolbar icon, it actually replaces the first picture to upload a new one – not what I’d expect…. Maybe it’s my browser, FF 3.6 on Fedora 12. I also noticed the same exact resizing bug (losing the handles) in CKEditor, maybe it uses similar code?

    Other than these minor things, it’s awesome, probably the best straightforward and mature looking WYSIWYG + Image uploader combo I’ve found (and I’ve literally spent at least 12 hours evaluating everything I can find)…

    Tomas

  35. cristie

    Hello,
    I can’t get it working on IE nor Chrome.

    It works fine in firefox thou.

  36. Ozan

    Hello thanks for this document, love your articles 🙂 see u later.

  37. xc flash game script

    Hey! This is kind of off topic but I need some advice
    from an established blog. Is it difficult to set
    up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to begin. Do you have any ideas or suggestions? Thanks

  38. tania

    I have been trying to use your script using YUI 2.7. But the upload label and the browse button did not show. I looked at the script, and I found that if you comment this line: Dom.getAncestorByTagName(img_elem, ‘form’).encoding = ‘multipart/form-data’; they will show. Do you know, what is going on here.

  39. Dennis

    I’m afraid I’d have to go back and look at it to see what’s going on. The YUI and ImageUpload code can be locked to a certain version. Unfortunately browsers change and upgrade pretty constantly.

  40. Dennis

    Does it work for you testing the version on this page though? Also you might test the 2.8.1 version in a later post I made.

  41. Nora

    Hi, I tried YUI 2.9 on chrome it worked very nice but on IE it tries to open the .Json file
    I chose to open it with txt file and i found the response
    {status: ‘UPLOADED’, image_url = “the correct path”} but nothing appeared in the editor, in addition this caused a script error saying –> Could not complete the operation due to error 80020101.

    Please help

  42. Dennis

    I’m afraid I haven’t supported this for quite some time. It does have a github repo though,
    https://github.com/djmuhlestein/yuiupload
    Contributions or pull requests are definitely welcome.

  43. kosala

    Plz mention using below codes,
    How to set path to the my project img folder.

    imageUploadURL:”http://i.froala.com/upload”,imagesLoadURL:”http://i.froala.com/images”



css.php