YUI Image Uploader works with YUI 2.8.1

I thought I'd better double check that the image upload still works fine with YUI 2.8.1 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.8.1 as far as I can tell. All you need to do is update the included JavaScript files to point to the new 2.8.1 editor and you should be fine. For reference, here is the yui-image-uploader26.js file. I'd like to remind you that there is a git repository for the yui image uploader too. I tagged v2.8.1.

Please let me know if there are any browser incompatibilities with this page.


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

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.

15 Responses to “YUI Image Uploader works with YUI 2.8.1”


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

    […] Update 06/16/10: Working example with YUI 2.8.1 added. Tagged the uploader git repository tag_v2.8.1. YUI 2.8.1 Image Uploader […]

  2. Anto

    Hi There,

    When I configured my uploader same as yours, the file uploads, and the ‘Image URL Here’ changes to the URL and quickly back to ‘Image URL Here’, any idea why this is?

    Cheers
    Anto

  3. Dennis

    Nothing comes to mind but you might post a sample URL that you’re having trouble with. I find FireBug on FireFox the most convenient way to find out what is going on and see things in action behind the scenes.

  4. ktheddon

    Able to browse and select an image, but nothing happens after that. After going through the yui-image-uploader.js and doing test alerts, I found that things stop happening here:

    YAHOO.util.Connect.asyncRequest(‘POST’, upload_url,{ upload:function(r){…some code that doesn’t get run…..}); I triple-checked the upload_URL, which is fine…But when I replace the “{ upload:function(r){…some code that doesn’t get run…..}” with just alert(“Test”), I get an alert. What might I be doing wrong?

  5. ktheddon

    Ok I figured out that I was getting this error from “connection-min.js”: “8Uncaught TypeError: Property ‘submit’ of object # is not a function”

    So I erased the name of my submit button for the root form and everything works fine now. Could there be a bug in the code that makes it do this,

  6. factorypolix

    It’s to complex follow your links, it’s a cycle that’s take you form one pages to other similar, please fix that and create only one post of a certain topic

  7. Dennis

    Just start at the original post and then read any of the updates that you are interested in. The original post (linked to from this post) has links to all later posts.

    Perhaps eventually I’ll get around to creating a page one of these days.

  8. Daniel

    One thing don’t forget to place:
    header(“content-type: text/html”); in your php file otherwise the image location will not change.(I forgot to do that) I’ve written my own php code(security check and image resize using GD) thank you for this plugin.

  9. Poo

    Nice implementation. but on IE9, there seems to be an Error.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; Zune 4.7)
    Timestamp: Wed, 16 Feb 2011 01:25:16 UTC

    Message: DOM Exception: INVALID_CHARACTER_ERR (5)
    Line: 8
    Char: 4230
    Code: 0
    URI: http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js

  10. Dennis

    Got a fix for the issue? I’d be happy to update the library if someone contributes a patch.

  11. rvchoudhary

    I am actually senior manager by profession. But love programming … I liked this tutirial very much… I have tailored it to fit 2.9.0 library. To overcome the IE issue… just update
    and you should be all set.. πŸ™‚ Thanks Dennis. Most of the issues get resolved by actually debugging. πŸ™‚

  12. rvchoudhary

    the last comment some how did not add the code snippet…. I meant to say just update the connection library to point out to 2.9.0/buil/connection/connection-min.js

  13. phippster

    Just throught I would pass this along too. In all of the examples so far the assumption is that your server side script that receives the file is storing it on your website and returning the URL to access the image. If you don’t want to store the file on your server you can use the data: URI format to keep the image completely in the email and WYSWIG editor — so no need to store the file on your server at all.

    Information on the data: type of URL is here:

    http://en.wikipedia.org/wiki/Data_URI_scheme

    And here’s my Perl script that converts an uploaded image into a data URL passed right back to YUI Image Uploader:

    #!/usr/bin/perl
    use CGI qw(:standard);
    use MIME::Base64

    ### Script reads in an image, converts it to base64 and returns it
    # As a data: URL

    unless(param(‘image’)){
    print header;
    print “{status:’No image was found in the upload.’}”;
    }

    ## Assumption there’s an image file.

    my $file = param(‘image’);

    # Determine the type because we’ll need to return that
    my $filescalar = scalar $file;
    my $content_type = &CGI::uploadInfo($filescalar)->{‘Content-Type’};

    # read the file contents into memory.
    my $size = (stat $file)[7];
    my $bytesread = 0;
    my $totalBytes = 0;
    my $buffer;

    print STDOUT header;
    print STDOUT “{status:’UPLOADED’, image_url:’data:$content_type;base64,”;

    ## Use multiples of 57 because that will mean the base64 encoding will have even # multiples with no padding in the middle of them. See docs on MIME::Base64
    while ($bytesread = read($file, $buffer, 60*57)) {
    $totalBytes += $bytesread;
    # pass empty string as second param to remove line breaks from base64 encoding
    print STDOUT encode_base64($buffer,”);
    }

    # read that last little bit
    read($file, $buffer, $size – $totalBytes);
    print STDOUT encode_base64($buffer,”);

    print STDOUT “‘}”;

    exit;

  14. Dennis

    That’s great! I never had a need to do anything with the editor unless I was saving the image for use later but I’m sure there are some good use cases.

  15. Jason

    Thanks a lot for this fix! it will save me a great deal of time working around the image upload once it’s up and running.

    The issue am having is that i can browse through my files and select the image i wish, but there is no upload button.

    Any help will be gratly appreciated



css.php