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.




 
 






 


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 thoughts on “Example Image Upload with YUI Rich Text Editor 2.7.0”

  1. 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. 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. 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. 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. 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. @Jbrennon & Ibrahima: You might need FORM tags around your textarea with enctype=”multipart/form-data”

  7. 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.

  8. 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

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

  10. 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);

  11. 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.

  12. 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

  13. 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.

  14. 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

  15. 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!

  16. 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?

  17. 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

  18. 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?

  19. 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).

  20. 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

  21. 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

  22. 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.

  23. 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.

  24. 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

  25. 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”

Leave a Reply

Your email address will not be published. Required fields are marked *