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.

This entry was posted in Programming and tagged , , , , , . Bookmark the permalink.

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

  1. jbrennon says:

    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 says:

    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 says:

    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. Dennis says:

    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 says:

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

  7. Yot says:

    can I change default font size to 12px?

  8. Dennis says:

    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 says:

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

    Thanks

  10. Yot says:

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

  11. Ed says:

    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 says:

    Does your browser work on this site’s example?

  13. mjw says:

    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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    Yes the sample on this page works fine.

  19. karim says:

    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 says:

    Does it work on this site for you?

  21. Ed says:

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

    I’ll add a post thanks!

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

  25. Andre M says:

    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 says:

    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 says:

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

  28. Kethlak says:

    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 says:

    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 says:

    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 says:

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

  32. Josh Cheek says:

    Absolutely 🙂 Hope it helps someone.

  33. MarriageMan says:

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

  34. TomasM says:

    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 says:

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

    It works fine in firefox thou.

  36. Ozan says:

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

  37. 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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    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”

Comments are closed.