All My Brain Where stuff from my brain lands

July 1, 2009

Example Image Upload with YUI Rich Text Editor 2.7.0

Filed under: Programming — Tags: , , , , , — Dennis @ 7:20 am

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 Comments »

  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!

    Comment by jbrennon — July 8, 2009 @ 11:36 am

  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.

    Comment by Ibrahima — July 20, 2009 @ 3:34 pm

  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

    Comment by kreviii — July 26, 2009 @ 4:59 am

  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.

    Comment by don.i.buchanan — July 29, 2009 @ 12:31 am

  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.

    Comment by Dennis — July 29, 2009 @ 7:33 am

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

    Comment by Chaman — August 22, 2009 @ 5:59 pm

  7. can I change default font size to 12px?

    Comment by Yot — September 9, 2009 @ 3:25 am

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

    Comment by Dennis — September 15, 2009 @ 12:32 pm

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

    Thanks

    Comment by kashif jamil — September 16, 2009 @ 2:33 am

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

    Comment by Yot — September 23, 2009 @ 3:57 am

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

    Comment by Ed — October 21, 2009 @ 11:58 am

  12. Does your browser work on this site’s example?

    Comment by Dennis — October 21, 2009 @ 12:33 pm

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

    Comment by mjw — October 21, 2009 @ 12:50 pm

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

    Comment by mjw — October 21, 2009 @ 1:49 pm

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

    Comment by Ed — October 22, 2009 @ 10:54 am

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

    Comment by Eelko — November 12, 2009 @ 3:55 pm

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

    Comment by Dennis — November 12, 2009 @ 4:00 pm

  18. Yes the sample on this page works fine.

    Comment by Eelko — November 12, 2009 @ 4:51 pm

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

    Comment by karim — November 18, 2009 @ 7:53 am

  20. Does it work on this site for you?

    Comment by Dennis — November 18, 2009 @ 7:55 am

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

    Comment by Ed — November 30, 2009 @ 12:10 pm

  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

    Comment by Mostyn Web Solutions — January 12, 2010 @ 8:24 pm

  23. I’ll add a post thanks!

    Comment by Dennis — January 13, 2010 @ 8:29 am

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

    Pingback by An Image Upload Extension for YUI Rich Text Editor | All My Brain — January 16, 2010 @ 3:45 am

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

    Comment by Andre M — January 19, 2010 @ 8:08 am

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

    Comment by Jamie — April 10, 2010 @ 6:47 pm

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

    Comment by Dennis — April 10, 2010 @ 6:49 pm

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

    Comment by Kethlak — June 8, 2010 @ 3:43 pm

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

    Comment by Kethlak — June 8, 2010 @ 7:37 pm

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

    Comment by Josh Cheek — June 18, 2010 @ 2:16 am

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

    Comment by Dennis — June 18, 2010 @ 6:01 am

  32. Absolutely 🙂 Hope it helps someone.

    Comment by Josh Cheek — June 18, 2010 @ 3:42 pm

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

    Comment by MarriageMan — August 12, 2010 @ 10:08 am

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

    Comment by TomasM — April 9, 2011 @ 9:40 am

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

    It works fine in firefox thou.

    Comment by cristie — July 5, 2011 @ 2:05 pm

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

    Comment by Ozan — February 5, 2012 @ 5:50 pm

  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

    Comment by xc flash game script — October 20, 2012 @ 4:08 am

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

    Comment by tania — February 7, 2013 @ 4:28 am

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

    Comment by Dennis — February 7, 2013 @ 11:05 am

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

    Comment by Dennis — February 7, 2013 @ 11:07 am

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

    Comment by Nora — April 3, 2014 @ 3:57 am

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

    Comment by Dennis — April 23, 2014 @ 4:51 pm

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

    Comment by kosala — June 2, 2014 @ 3:48 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress

css.php
%d bloggers like this: