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.
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.
Pingback: An Image Upload Extension for YUI Rich Text Editor | All My Brain
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
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.
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?
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,
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
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.
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.
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
Got a fix for the issue? I’d be happy to update the library if someone contributes a patch.
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. 🙂
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
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;
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.
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