YUI Rich Editor Upload Extension (updated)

May 13, 2008 - Update: I added a fully functional example. In that way you can use the example files instead of copying text from the previous links (Like Peter Briers said in a comment, copy and paste results in not readable scripts). I hope it could be useful.

When I started this blog I said that I wasn't sure about what I'm going to write, and one of the things that I have in mind is well...Web Development my current job, but I wasn't sure that my job or some of my code were really helpful beyond what you can find in some programming language manual like the excellent PHP manual, but maybe this time I can help or improve in some way the work started for other guys.

Well before I begin I would like to say that this JavaScript file is in 99.9% not mine, I just add some things that hopefully would make it better. Some things that I added are:

• Added a custom div container to store all the upload functionality (label, input button, upload button)
• Keep the style separated in a external CSS file
• Added a YUI button to make the upload
• Added YUI JSON utility to parse the server response
• Added custom status messages (errors)
• Change the name of some variables to suit the examples in the YUI documentation

And so the script is: yui_image_uploader (remember to copy the code and paste in a new file, name the file yui-image-uploader.js)

I also modified the PHP script that handles the upload in the server side, this one is very different to the original one and I think that probably you will need PHP 5.2.0 and up to run it well.

Here it is: yui_image_uploader (remember to copy the code and paste in a new file, name the file yui_image_uploader.php)

Finally the CSS that you need to make the upload extension look nice is: yui_image_uploader

And here is some example that you can use: yui_image_uploader_example (remember that you need to include the JavaScript YUI libraries like yahoo-dom-event, element, container-core, menu, button, connection, json, editor and our upload extension: yui-image-uploader.js)

Finally remember that I said that this work is 0.01% mine, well the 99.9% is by Dennis Muhlestein, Thanks a lot Dennis.

Here is a picture of the Yui editor (with upload extension) in action:

* tested in IE 7 and Mozilla Firefox 2

Fully functional example: yui_image_uploader