Before you begin: Read the updates at the bottom of the page. This post was written for an older version of the YUI library.
I’ve had nothing but good things to say about the Yahoo User Interface tools. It seems to me like the developers continually add all the things from other libraries that I like into one simple to use, well documented, overall good quality library.
The new addition of the rich text editor has left me no less pleased. I can now ditch the other editors I’ve used in the past in favor of one that will be maintained. (I’ve tried two that worked, but were becoming out-dated and didn’t really have support.)
Yahoo’s RTE has a great dialog for modifying images. You can’t use it to upload images from your computer however. So far, every situation I’ve needed an RTE has called for the ability to add images from the users hard drive. I’ve created an extension that modifies the RTE image dialog to include a new input for browsing to an image. It uses the Yahoo Connection manager to upload the image in the background to your server, and then displays the image in the RTE after the file is successfully uploaded.
Here is how to use it:
-
Place the required source code dependencies for YUI Editor and YUI Connection Manager in your html.
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.3.1/build/editor/editor-beta-min.js"></script>
<!-- Source for Connection Manager (Required for yuiImageUploader) -->
<script src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>
- Download the yuiImageUploader Source and add it to your included javascript dependencies
<script src="/yui-image-uploader.js"></script>
- Instantiate your editor the same as you normally do. Then modify it with the yuiImageUploader function. The parameters for the function are the editor instance, the url to upload the file to, and the parameter name that the file will be uploaded with.
var myEditor=new YAHOO.widget.Editor('rte_div',cfg);
yuiImgUploader(myEditor, '/upload_url','param_name');
myEditor.render();
-
Implement your upload handler on your server. I’m assuming if you’re looking for this functionality, you already know how to do this. The important thing is the response. The content of the response is a JSON object. You must return a response with the Content-Type header set to ‘text/html’ however, because IE will attempt to open the response in a new window if the Content-Type header is something other than ‘text/html’. Your object needs to have a status and an image_url variable. For a successful response, just return:
{status:'UPLOADED',image_url:'/the/url/of/the/image'}
For a failure, modify the status variable to be an error message that can be shown to the user:
{status:'The image was too big.'} - When your users click on the image button on the RTE editor, the yuiImageUploader modifies the image dialog to have an additional file field for uploading an image:
The upload is done in the background with the Connect object provided by Yahoo’s Connection Manager. If everything works ok, the URL returned by the server is placed in the image url input and the image is shown in the editor.
That’s it. You can download the file here.
Enjoy.
Update:
I’ve created another post that shows a working example here.
Update:
I’ve added another example, this time with the server side script being implemented in PHP.
Update 10/31/08:
Thanks to bkinsey for providing updates to the client script for use with YUI 2.6. You can see his comment below or I’ve added downloadable file here.
Update 11/6/08:
I corrected errors in the script and added a working YUI 2.6 Image Uploader example.
Update 02/16/09:
Vijay Oruganty has provided a Java upload handler for the YUI image uploader.
Update 07/01/09:
I’ve added a working example with the 2.6 uploader and YUI 2.7. YUI 2.7 Image Uploader
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
Dennis, thanks for the help. You’re right. That did get rid of the (301)… however things still aren’t working.
According to Firebug, there is no POST information begin sent — unless I am reading Firebug wrong. Any suggestions or insight? The PHP script is ending right off the bat because it doesn’t have any POST information to use.
Thanks.
I used WireShare to confirm that the file is indeed being sent.
Here is a snippet:
Are you looking for the “image” parameter in your server side script?
I think your upload directory is not writable by the web server.
You can take a look at my exact file/directory structure as well as the files I am using via this archive:
http://www.avencrest.com/Archive.zip
And thank you so much for your help. I really appreciate it!
Both upload_image and uploads have their permissions set at 777.
Hi Cyle. I was working on my second website using this great extension with the php script i posted above, when i’ve encountered some troubles similar to yours, with no apparent reason…then i’ve found that the server i was UNIX based, wich is case-sensitive when reading headres, and it also needed a semi-colon at the end of the line…maybe yours is this kind too, so i sugest you to change all the headers on the php script from
– header(
Hi,
I’ve got a very simple question.
How do I point to an upload script (index.php).
yuiImgUploader(oEditor, ‘/scripts/yui/build/yuieditor/index.php’,’img’);
it doesn’t load the upload script at all. Or is it the wrong line?
Please help.
Is your “index.php” file the one that can accept the file for upload? Is the path correct? the 2nd parameter of the yuiImgUploader should be the relative path to a server side function that can accept the file (under the name given by the 3rd parameter).
yes, I tried the file that was uploaded by one of the people from here: http://www.babybabybaby.com.mx/yui_image_uploader_php_working_script.txt
the image dir and uploadscript dir are set to “777”. (linux server).
and this is the function that I use to call the upload script.
(function() {
var oEditor = new YAHOO.widget.Editor(‘editor’,
{
height: ‘300px’,
width: ‘500px’,
handleSubmit: true
});
yuiImgUploader(oEditor, ‘/~layouts/modules/scripts/yui/build/yuieditor/index.php’,’img’);
oEditor.render();
})();
above is the relative path to the uploadscript. Everything is fully loaded, and I can browse to the image. After pressing “upload image”, it does nothing.
I’m actually playing around with it right now. I don’t know if there script has a bug or if there is something I’m missing. I’ll post back when I’ve figured it out. Do let me know if you find the answer sooner. I suggest turning up the error logging for php and starting there.
After debugging a little, I found the the imagecreatefromjpeg function was dying. I’m not sure why. Perhaps someone else could expound on this.
I cut everything out everything but the actual upload code and simply saved the file that was uploaded and it worked. I’ll be completing a working example in PHP sometime today I think.
That’d be great! Thanks for helping me with this. I’m sure that many people will find this very useful.
I’ve finished my PHP example:
http://allmybrain.com/2007/12/21/an-example-rich-text-editor-image-upload-with-php/
Hey again,
(i try to post this message, didn’t work the first time)
Everything loads up perfectly, but after pushing “upload image”, it doesn’t do anything.
– I do the following…
http://www.website.com/scripts/yui_img_uploader.php
http://www.website.com/scripts/yui-image-uploader.js
so it’s pointed to:
yuiImgUploader(myEditor, ‘/scripts/yui_img_uploader.php’,’image’);
– SAVING IMAGES FOLDER
http://www.website.com/uploads/
(permissions set to 777):
full path on server:
/public_html/uploads/
– UPLOADSCRIPT:
$path = “uploads/”;
and:
$path = “/” . $path;
—
this doesn’t work. I’m using php4 on linux. I tried all kinds of combinations to point to the uploadscript.
Hi Dennis, hey i think you forgot to moderate my las post, theres some php code about headers that could Cyle. About the imagecreatefromjpeg function, as i said before, it belongs to the php GD library as well as all the other image manipulation functions i used on that script, and it must be compiled and enabled on your server php config. Maybe that’s why it was dying while you was trying it. However, the php script on your example does the work fine.
Well, I found one comment, the one before the one you just made, that was erroneously marked as spam, but I didn’t see another waiting moderation or marked as spam.
Thanks for the input though. The image processing is a little beyond the scope of what I wanted to handle here, but it is probably pertinent for anyone who wants to actually process an image on the server side with PHP. Nice work.
To get this working in Safari I needed to set the encoding of the enclosing form to “multipart/form-data”. Below this line:
var img_elem=Dom.get(‘insertimage_url’);
I added:
Dom.getAncestorByTagName(img_elem, ‘form’).encoding = ‘multipart/form-data’;
@Lars: I thought it was probably something to do with the form encoding but hadn’t had a chance to work on it. Thank you for posting back the solution. I’ve updated the script with your solution.
If you’ve previously downloaded the script, you ought to do so again to get the latest version with this fix.
Hey, I am beginner with JavaScripts..I need to take the innet html from the C# file .. how can i do that????What I know is that it is client server side..
Thx
You’re correct that you need additional server programming. On the PHP RichText example, someone posted some server code in asp.net. Perhaps that will help you.
Hi Dennis,
I was trying to use the RTE ..
but when i click on the upload image button… nothing actually happens ..as far as i see it .. the link points to the same page .. instead of some other page to upload the image ..
this is what i have edited :
yuiImgUploader(myEditor, ‘/img_uploader.php’,’image’);
Thanks
Hi Daniel,
In the function yuiImgUploader(a,b,c) …
the second parameter as per the example specified above is the path of the directory where the image will be uploaded ..
but if you see the comments .. it says path of the uploader script .. which one of these is correct ..
and is there any constraint on the name of the uploader script…
Thanks
It’s the path of the uploader script. The uploader script can be whatever you wish. I’ll edit the page to reflect that correctly. Also, if you post the link to your example that isn’t working, we can probably find out why.
-Dennis
Has anyone gotten this to work with a ColdFusion based upload handler? Even with the revised script setting the encoding variable of the posted form, CF still returns the The cffile action=”upload” requires forms to use enctype=”multipart/form-data” error. Anyone had this problem?
I’ve a display problem.
In Mozilla it works just fine but in IE the created textbox ‘insertimage_upload’ has an width from 0px.Everything works fine, including the upload, only I can ‘t see the selected path+file.
Ideas?
You’ll have to tweak the style sheet appropriately for IE.
In case anyone is interested, I updated the js code for yui 2.6.0
/* yuiImgUploader variables: rte: The YAHOO.widget.Editor instance upload_url: the url to post the file to upload_image_name: the name of the post parameter to send the file as Your server must handle the posted image. You must return a JSON object with the result url that the image can be viewed at on your server. If the upload fails, you can return an error message. For successful uploads, the status must be set to UPLOADED. All other status messages, or the lack of a status message is interpreted as an error. IE will try to open a new document window when the response is returned if your content-type header on your response is not set to 'text/javascript' Example Success: {status:'UPLOADED', image_url:'/somedirectory/filename'} Example Failure: {status:'We only allow JPEG Images.'} */ function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) { // customize the editor img button YAHOO.log( "Adding Click Listener" ,'debug'); rte.addListener('toolbarLoaded',function() { rte.toolbar.addListener ( 'insertimageClick', function(o) { try { var imgPanel=new YAHOO.util.Element(editor_name + '-panel'); imgPanel.on ( 'contentReady', function() { try { var Dom=YAHOO.util.Dom; if (! $(editor_name + '_insertimage_upload')) { var label=document.createElement('label'); label.innerHTML='Upload:'+ ''+ ''; var img_elem=Dom.get(editor_name + '_insertimage_url'); Dom.getAncestorByTagName(img_elem, 'form').encoding = 'multipart/form-data'; Dom.insertAfter( label, img_elem.parentNode); 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 ); var c=YAHOO.util.Connect.asyncRequest( 'POST', upload_url, { upload:function(r){ try { // strip pre tags if they got added somehow resp=r.responseText.replace( //i, '').replace ( //i, ''); var o=eval('('+resp+')'); if (o.status=='UPLOADED') { Dom.get(editor_name + '_insertimage_upload').value=''; Dom.get(editor_name + '_insertimage_url').value=o.image_url; // tell the image panel the url changed // hack instead of fireEvent('blur') // which for some reason isn't working Dom.get(editor_name + 'insertimage_url').focus(); Dom.get(editor_name + 'insertimage_upload').focus(); } else { alert ( "Upload Failed: "+o.status ); } } catch ( eee ) { YAHOO.log( eee.message, 'error' ) } } } ); return false; }); } } catch ( ee ) { YAHOO.log( ee.message, 'error' ) } }); } catch ( e ) { YAHOO.log( e.message, 'error' ) } }); }); }Thanks! I added a link to the article with the downloadable script you provided.
I can’t get the editor load correctly with the updated code for yui 2.6. Keep getting “Object expected” error in IE. BTW, I’m not very familiar with javascript.
I have this line in html:
yuiImgUploader(myEditor, ‘/upload.php’,’image’);
…but the updated 2.6 code needs 4 parameters?
function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) {
What should I put as parameter for “editor_name”?
I tried “yui-editor” after comparing old code with 2.6 one, but still get the same error.
If I remove the yuiImgUploader function completely from the page, then the editor loads correctly, so everything else is set up right.
Any suggestions?
I haven’t had a chance to check it out. I’ll try and post a working example here in the next few days. Let us know in the mean time if you find any errors or a way to fix your problem.
Yep… I think bkinsey there might have posted the wrong copy of his code there – because there’re a couple of things that just won’t work.
I’ve updated it to add a few little things – and I have it working fine with 2.6 now:
(By the way, the ‘editor_name’ parameter is just the id of the rte element. So you want to be doing something like this when you’re setting up your editor:
myEditor = new YAHOO.widget.Editor('myEditorElmId', myConfig); yuiImgUploader(myEditor, 'myEditorElmId', '/upload_url', 'param_name'); myEditor.render();function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) { rte.addListener('toolbarLoaded',function() { rte.toolbar.addListener ( 'insertimageClick', function(o) { try { var imgPanel = new YAHOO.util.Element(editor_name + '-panel'); imgPanel.on ( 'contentReady', function() { try { var Dom=YAHOO.util.Dom; //if (! $(editor_name + '_insertimage_upload')) { if (get(editor_name + '_insertimage_upload') == null) { var label=document.createElement('label'); label.innerHTML='Upload:'+ ''; var img_elem=Dom.get(editor_name + '_insertimage_url'); Dom.getAncestorByTagName(img_elem, 'form').encoding = 'multipart/form-data'; Dom.insertAfter( label, img_elem.parentNode); YAHOO.util.Event.on ( editor_name + '_insertimage_upload', 'change', function(ev) { Dom.get(editor_name + '_insertimage_url').value=Dom.get(editor_name + '_insertimage_upload').value; var uploadStatus = Dom.get(editor_name+'_upload_status'); uploadStatus.style.color= '#ff0000'; uploadStatus.innerHTML= ' Uploading...'; YAHOO.util.Event.stopEvent(ev); // no default click action YAHOO.util.Connect.setForm ( img_elem.form, true, true ); var c=YAHOO.util.Connect.asyncRequest( 'POST', upload_url, { upload:function(r){ try { // strip pre tags if they got added somehow //var resp=r.responseText.replace( //i, '').replace ( //i, ''); var resp=r.responseText.replace( '//i', '').replace ( '//i', ''); var o=eval('('+resp+')'); if (o.status=='UPLOADED') { Dom.get(editor_name + '_insertimage_upload').value=''; Dom.get(editor_name + '_insertimage_url').value=o.image_url; // tell the image panel the url changed // hack instead of fireEvent('blur') // which for some reason isn't working Dom.get(editor_name + 'insertimage_url').focus(); Dom.get(editor_name + 'insertimage_upload').focus(); uploadStatus.innerHTML= ''; } else { uploadStatus.innerHTML= ''; } } catch ( eee ) { YAHOO.log( eee.message, 'error' ) uploadStatus.innerHTML= ''; } } } ); return false; }); } } catch ( ee ) { YAHOO.log( ee.message, 'error' ) } }); } catch ( e ) { YAHOO.log( e.message, 'error' ) } }); }); }Oh, hello… It’s the commenting utility on this site – it’s stripping out the code below here:
label.innerHTML=’Upload:‘+
”;
Rob, I edited your comment to add pre tags around your code.
You can do this:
<pre lang=”javascript”>
// formatted js code
function sample() {}
< /pre>
Unfortunately, it seems wordpress is stripping those tags out. I may need to edit something to allow them to be posted. I modified my comment manually.
A working copy of bkinsey’s 2.6 code with the missing HTML tags can be found by doing a Google search for ‘yuiImgUploader’ and selecting the top hit, which is a post by bkinsey to the ydn-javascript Yahoo Group. (I attempted to post the link here, but the comment system seems to think it’s spam!)
You’ll need to remove the word wrapping in an editor. I also found that I didn’t have ‘$’ defined and so needed to change the line:
if (! $(editor_name + ‘_insertimage_upload’))
to:
if (! YAHOO.util.Dom.get(editor_name + ‘_insertimage_upload’))
Hope this helps…
msanders is right – and the missing code there is just the same as the previous version – though the upload happens when the file input is changed, rather clicking a link.
You know what.. A video embedding control would be nice too.. I’ll post one when I get it done.
I’ve corrected the script bugs and added a working example with YUI 2.6 here.
Using this great function with django. This worked for me.
In settings.py say where to put pics
CONTENT_IMAGES = MEDIA_ROOT+ ‘content/’
CONTENT_IMAGES_URL = MEDIA_URL + ‘content/’
In YUIImageUploader put call to django url:
yuiImgUploader(myEditor, params[‘divName’], ‘/json/uploadimage/’,’image’);
And tell urls.py how to handle it:
(r’^json/uploadimage/$’,’uploadimage’),
Then create the view to handle the upload:
def uploadimage(request): """ http://allmybrain.com/2007/10/16/an-image-upload-extension-for-yui-rich-text-editor/ """ try: # upload_full_path = os.path.join(settings.MEDIA_ROOT, upload_dir) upload_full_path = settings.CONTENT_IMAGES upload = request.FILES['image'] dest = open(os.path.join(upload_full_path, upload.name), 'wb+') for chunk in upload.chunks(): logging.debug(".") dest.write(chunk) dest.close() result='{status:"UPLOADED",image_url:"%s%s"}' % (settings.CONTENT_IMAGES_URL, upload.name) return HttpResponse(result,mimetype='content-type: text/html') except Exception, e: return HttpResponse("Error in uploading image")Note that indents have been left out above – indent one below try and except!
Thanks for the additional info. I added pre tags around your code so at least the indents work. The pre tags work a lot better in posts than they do in comments but it ought to help at least.. especially for python.
Thanks Dennis!
Am having problems with my implementation on PCs. I assume it is the Content Type. Originally I had text/html and works on mac and firefox on PC but not IE. Then tried text/javascript as suggested in a post elsewhere but still doesn’t work on IE. The example on this site works fine using IE so wondered what is going on. An example of the django code I used is posted above and wondered if anyone could spot a problem and whether this could be a django problem?
I think the text/javascript content type might be a mistake. I recall having problems like this for IE and I think the correct is text/html to not get a popup asking you to save the response. You can use Firebug in Firefox to see the response headers. Test the example here as well as yours and see what the difference is.
This doesn’t work in firefox mac
return HttpResponse(result,mimetype=’Content-Type:text/html’)
But this does (but not in IE)
return HttpResponse(result,mimetype=’content-type: text/html’)
PIcky or what!
Hi Dennis
Thanks for the post and putting together a working example. I wrote the upload handler in Java (a simple servlet as needed in one of our apps) and combined it with rest of your stuff. Let me know I can upload the eclipse project as a zip.
-Vijay.
You can send it to me, and I’ll attach it to the post, or if you like, just post a link to it here in the comments.
Hey,
Just wanted to know if this works even if you are using YUI’s SIMPLE editor. Currently, for adding images, it shows a Script Prompt asking for Link URL.. I want to implement this browse functionality in it. I tried this, but the script prompt is still the same.
var myEditor = new YAHOO.widget.SimpleEditor(‘editor’, {
height: ‘300px’,
width: ‘600px’
});
myEditor.render();
yuiImgUploader(myEditor,’/upload_url’,’param_name’);
Dennis,
I’ve got it working with CodeIgniter (PHP framework), except for one thing: the image doesn’t show up within the editor. (The image does get uploaded, the URL is coming back fine and does get inserted into the Editor content, but the image doesn’t display within the Editor).
BTW, this is Editor v2.7.
Any ideas? thanks.
Can you see the image in your browser at the same URL that is being passed back to the editor? You can use firebug in FireFox to inspect the element and see any errors too.
Yes, the image does show up, so the upload succeeded, the URL is good. If I provide a URL in the img dialog directly, rather than doing an upload, then I do see the image in the Editor, so its not an underlying problem with Editor.
The difference appears to be that images provided with a direct URL have a class=”yui-img” within the img tag, but uploaded images do not. I suspect that if I could get class=”yui-img” into the img tag then things would start working as expected.