All My Brain Where stuff from my brain lands

November 6, 2008

Example YUI Image upload with YUI 2.6.0

Filed under: Programming — Tags: , , , , , — Dennis @ 8:03 am

I wanted to add an example of the yuiImgUploader script working with YUI version 2.6.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.

That changes from the previous 2.5 Image uploader are quite small. If you were using a pre 2.6 version of the editor, simply change the location of a couple scripts and add your editor name to the yuiImgUploader function parameters.

Here is the new yui-image-uploader26.js file.

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.


  1. Great ap, thx :o)
    I’ve been writing a new application of MyGenesis CMS using the YUI rich text, your upload mod is perfect. Works great, however, one thing I noticed with the upload php script, it uploads images under the server name which causes permission errors. To fix this just add a chmod to it like so

    $chmod = chmod($path, 0766); //set the appropriate permissions.

    on another subject, I’m trying to figure out how to change the style within the textarea, can’t find any documentation on it though, any ideas?


    Comment by mygenesis — November 7, 2008 @ 11:26 am

  2. Me again >.< I’ve searched for days to implement custom css in the iframe, finally found a post by Dave Glass so I implemented it with your image upload, just in case anyone else is looking for something similar, here’s the code

    (function() {
    var Dom = YAHOO.util.Dom,
    Event = YAHOO.util.Event;

    var myConfig = {
    height: ‘300px’,
    width: ‘522px’,
    handleSubmit: true,
    dompath: true,
    animate: true

    var myEditor = new YAHOO.widget.Editor(‘msgpost’, myConfig);
    myEditor.on(‘editorContentLoaded’, function() {
    var head = this._getDoc().getElementsByTagName(‘head’)[0];
    var link = this._getDoc().createElement(‘link’);
    link.setAttribute(‘rel’, ‘stylesheet’);
    link.setAttribute(‘type’, ‘text/css’);
    link.setAttribute(‘href’, ‘editor.css’);

    var link2 = this._getDoc().createElement(‘link’);
    link2.setAttribute(‘rel’, ‘stylesheet’);
    link2.setAttribute(‘type’, ‘text/css’);
    link2.setAttribute(‘href’, ‘editor.css’);
    }, myEditor, true);
    yuiImgUploader(myEditor, ‘msgpost’, ‘img2.php’,’image’);


    of course change the editor.css file to your css file location.

    Best Regards,

    Comment by mygenesis — November 7, 2008 @ 2:39 pm

  3. Hi Mr. Dennis,

    I have a problem with my code. The image upload script (yui-img-uploader.php) is not initiating when i select the pic to upoad.

    Please help me out here…

    This is my code:

    var myEditor = new YAHOO.widget.Editor(‘text234’, {
    height: ‘300px’,
    width: ‘522px’,
    handlesubmit: true,
    dompath: true, //Turns on the bar at the bottom
    animate: true //Animates the opening, closing and moving of Editor windows
    yuiImgUploader(myEditor, ‘text234’, ‘/app/webroot/yui-image-uploader.php’,’image’);
    //Inside an event handler after the Editor is rendered
    YAHOO.util.Event.on(‘submit’, ‘click’, function() {
    //Put the HTML back into the text area

    //The var html will now have the contents of the textarea
    var html = myEditor.get(‘element’).value;

    *Note: I’m using this on cakePHP.

    Comment by Aneesh — November 17, 2008 @ 1:22 am

  4. Have you installed FireBug (for FireFox) and enabled YAHOO logging? Most people find the problem pretty fast after watching for the appropriate log messages.

    Comment by Dennis — November 17, 2008 @ 10:56 am

  5. @Aneesh Just guessing but you shouldn’t need /app/webroot/ because cakephp will direct it to there anyway.

    Comment by Duncan Brown — November 22, 2008 @ 10:51 am

  6. […] 原文參考自:Example YUI Image upload with YUI 2.6.0 […]

    Pingback by Vine » Blog Archive » [YUI] Uploader + Rich Text Editor — December 29, 2008 @ 6:04 pm

  7. Hey Dennis, I LOVE the upgrade you’ve made to this app as i knew there was something a bit missing to the original. I have a question though, how would it be possible to marry both techniques thereby allowing the user to insert a local image or, if on a restricted public computer, they can then insert a remote image?

    Comment by aristanoble — January 19, 2009 @ 7:28 am

  8. LOL, I totally overlooked that this technique I’ve spoken of is already in place! I’ve just been RE-impressed! Way to go Dennis!

    Comment by aristanoble — January 19, 2009 @ 7:31 am

  9. i still can not get the image to post or upload and all i did was copy paste and change the editor_name to the name of my editor, chmod my dir and directed to the dir in the php file(which i have basically the same code doing it in another app i made for the site)… everything else is the basic coding used throughout..

    Comment by ebaretta — January 20, 2009 @ 5:04 am

  10. i’m using the rte_img_uploader26.js and the php file from above

    Comment by ebaretta — January 20, 2009 @ 5:05 am

  11. I suggest installing FireBug and watching your request/response to see exactly what the problem is. Also, enable yahoo logging so you can see any error messages/exceptions.

    Comment by Dennis — January 20, 2009 @ 9:44 am

  12. for some reason mine fails here:

    YAHOO.util.Event.on ( editor_name + ‘_insertimage_upload’, ‘change’, function(ev) {
    YAHOO.util.Event.stopEvent(ev); // no default click action
    YAHOO.util.Connect.setForm ( img_elem.form, true, true );

    which is loacted in the img uploader js, after adding a image, i get no response, no alert, no nothing

    Comment by sky — February 5, 2009 @ 12:09 pm

  13. Install FireBug and see what is happening. See my previous comment too.

    Comment by Dennis — February 5, 2009 @ 12:24 pm

  14. Am having a nightmare getting this working with any browser other than Firefox/Mac. Safari is uploading the file but is then return the response as a download. I got it to write out the Response Accept variable and this is gzip, deflate.
    This is probably a red herring, but just in case, is that what you would expect??

    I suspect django is putting something into the request that is messing things up, but I am not a python expert and I have had no repsonse to my posts on the django user group.

    Anyone with any ideas on what I could try, please let me know. I have racked up about 3 solid days on this issue (which includes trying other RTE editors) all to no avail…

    Comment by phoebebright — February 10, 2009 @ 4:46 pm

  15. Here is the full request header from firebug:



    Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv: Gecko/2009011912 Firefox/3.0.6
















    Comment by phoebebright — February 10, 2009 @ 4:48 pm

  16. Do other browsers work with my example here?

    Have you learned how to enable the YAHOO logging messages and view them in any browser? The library has enough debug and error messages that you should be able to see exactly what is going on in pretty much any browser. Adding and viewing the logging panel is an exercise left up to you though. There are a lot of examples on the YUI developer site for the logger component.

    You can always add additional debug messages if you need too.

    Comment by Dennis — February 10, 2009 @ 4:50 pm

  17. Yes, your example works which is why I’m blaming Django! Will explore messaging tomorrow. Thanks for the quick response.

    Comment by phoebebright — February 10, 2009 @ 6:21 pm

  18. So what happens if someone removes or deletes the image from the text? Does it remain on the server as an orphan?

    Comment by zaphod — February 16, 2009 @ 11:26 pm

  19. You’re correct. I dealt with orphans by looking at the contents of the text area when saving and any images not references were flagged for deletion. You could go further and implement a listener that fires when the image is deleted and then handle the event appropriately. Sounds like a good add-on to this project actually.

    Comment by Dennis — February 17, 2009 @ 10:11 am

  20. I think the listener idea is a good one. The server side I can handle with PHP, but I am new to YUI and Ajax. I was looking into using YUI to re-do the back-end admin pages of my software and I like the look and feel of YUI.

    I also noticed that the editor in WordPress allows for drag-and-drop image uploading into the edit box. How hard would that be to implement in YUI?

    Comment by zaphod — February 17, 2009 @ 11:10 am

  21. Shouldn’t be too hard. I’ve been a little out of the loop lately on YUI stuff since I’ve been working on embedded software lately. The trend for the editor was to have more and more listener’s that you could attach handlers too though. I’d wager everything is already in place for you to implement a delete image handler.

    Comment by Dennis — February 17, 2009 @ 8:57 pm

  22. Hi dennis,
    this is my error message
    “\nWarning: fopen(/image/12278.jpg) [function.fopen]: failed to open stream: No such file or directory in C:\wamp\www\YUI\image\upload.php on line 23\n\nWarning: fwrite(): supplied argument is not a valid stream resource in C:\wamp\www\YUI\image\upload.php on line 24\n\nWarning: fclose(): supplied argument is not a valid stream resource in C:\wamp\www\YUI\image\upload.php on line 25\n{status:’UPLOADED’, image_url:’/image/12278.jpg’}”

    I can’t see the image and there is nothing uploaded in the /image directory.


    Comment by phil — March 30, 2009 @ 2:49 pm

  23. Are you trying to use the sample PHP script from this site? That script is quite Unix centric. You’ll need to adapt it for a Windows based server.

    Comment by Dennis — March 31, 2009 @ 6:38 am

  24. yes, I’m using your sample php and the site work vwith WAMP. I’ll try this on a Linux server.

    Comment by phil — March 31, 2009 @ 12:51 pm

  25. it work’s fine with a LAMP, thank’s

    Comment by phil — March 31, 2009 @ 1:15 pm

  26. I getting error like

    error Permission denied to get property Window.document

    What is the reason .please help me this is very urgent

    Comment by Rajasekhar — April 8, 2009 @ 3:31 am

  27. Firebug and YUI logger are your friends.

    Comment by Dennis — April 8, 2009 @ 5:50 am

  28. Hi,

    Thanks for the detailed guideline of YUI image upload functionality.

    I am using the java servlet example. But I am not able to upload files because
    the request object is not getting mapped with the insertimage_upload html file element.

    I am using yui-image-uploader26.js and kept all other things as instructed.

    Please advice.

    Thanks and Regards

    Comment by Sasanka — April 8, 2009 @ 8:21 am

  29. Great post! Anyhow, I’ve managed to use the yui-image-uploader26.js with RTE version 2.7. Maybe If I have more time, I’ll add the upload progress into the script.

    Comment by measaura — April 11, 2009 @ 7:39 am

  30. Hi,

    I am using rte image uploader.
    i am unable to get the response after the image is uploaded to given folder.

    Comment by Rajasekhar — April 14, 2009 @ 3:51 am

  31. when form submitted response is inserted to iframe.

    in connection.js
    uploadFile:function(o, callback, uri, postData)

    in this method i am unable to get the response.

    Mianly i am using this in ning opnesocial application.

    please help me on this issue.this is very important for me.

    target iframe is getting created and removed .then how can i get the response


    Comment by Rajasekhar — April 14, 2009 @ 3:56 am

  32. try
    // responseText and responseXML will be populated with the same data from the iframe.
    // Since the HTTP headers cannot be read from the iframe
    obj.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:io.contentWindow.document.documentElement.textContent;
    obj.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

    in catch i am getting error like
    “Permission denied to get property Window.document”

    Comment by Rajasekhar — April 14, 2009 @ 3:59 am

  33. Im trying this RTE with pic upload… but im still getting the same problem i had with the other version…

    The image gets uploaded, but the “Image URL” just “reloads”

    I see it changes, but in a sec, it returns to “Image URL Here”

    How can i fix this?


    Comment by Øyvind — April 16, 2009 @ 11:40 am

  34. Everybody’s situation is slightly different. Different browsers, different Operating systems etc. Only thing I can suggest is to user FireBug w/ Firefox and enable YUI logging.

    Comment by Dennis — April 16, 2009 @ 11:47 am

  35. […] 11/6/08: I corrected errors in the script and added a working YUI 2.6 Image Uploader […]

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

  36. Hi Dennis,
    Its fantastic script!
    What should i add in script that after user select image, the image panel will close auto?

    Comment by dodo — April 12, 2010 @ 6:39 am

  37. Hi Dennis,

    You RTE is very useful. One problem I faced today is when I upload an image which is about 2M. it took too long and quickly filled up my server space. Do you think you can provide resizing option in yui_image_uploader.php file?

    I tried to add resizing php code in your uploader.php, but it didn’t work.

    Comment by andy — January 3, 2011 @ 9:19 pm

  38. Here is my crop_image.php. I know how to add this to yui_image_uploader.php. However, somehow it doesn’t pass image_url to connection manager. the php file is heavenly tied to javascript and json which i don’t know. can anyone help?

    function getExtension($str) {

    $i = strrpos($str,”.”);
    if (!$i) { return “”; }

    $l = strlen($str) – $i;
    $ext = substr($str,$i+1,$l);
    return $ext;


    $image =$_FILES[“file”][“name”];
    $uploadedfile = $_FILES[‘file’][‘tmp_name’];

    if ($image)
    $filename = stripslashes($_FILES[‘file’][‘name’]);
    $extension = getExtension($filename);
    $extension = strtolower($extension);

    if (($extension != “jpg”) && ($extension != “jpeg”) && ($extension != “png”) && ($extension != “gif”))
    echo ‘ Unknown Image extension ‘;
    } else {

    if($extension==”jpg” || $extension==”jpeg” )
    $uploadedfile = $_FILES[‘file’][‘tmp_name’];
    $src = imagecreatefromjpeg($uploadedfile);
    else if($extension==”png”)
    $uploadedfile = $_FILES[‘file’][‘tmp_name’];
    $src = imagecreatefrompng($uploadedfile);
    $src = imagecreatefromgif($uploadedfile);





    $ran = rand ();
    $filename = “test_images/cropped_”.$ran.”_”.$_FILES[‘file’][‘name’];


    //If no errors registred, print the success message

    echo “I got here”;

    if($_SERVER[“REQUEST_METHOD”] == “POST” && !$errors)
    // mysql_query(“update SQL statement “);
    echo “Image Uploaded Successfully!”;


    Comment by andy — January 3, 2011 @ 9:22 pm

  39. I’m afraid resizing on the client side is something that is going to be a real pain with JavaScript. Perhaps it can be done but if so I don’t know how. I don’t think could do it unless you were using a browser extension or a plugin. Flash or Java could probably do it.

    Anyway, beyond the scope of this project anyway I think.

    Comment by Dennis — January 3, 2011 @ 9:22 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress

%d bloggers like this: