An Example Rich Text Editor Image Upload with PHP

After my previous image uploader and turbogears image uploader posts, the overwhelmingly most requested information has been a PHP implementation of the upload script. I’m not much of a PHP guru. Luckily, a few users have posted possible solutions for this. I’ve added an editor to this post that uses a PHP script to process the image on the server. The original image uploader script is compatible with the newer 2.4 version of the editor.

Whithout further delay, here is the editor. Just click on the “insert image” link under “Insert Item” to test the upload functionality.

Here is the initialization JavaScript for the editor on this page. You can find information on Yahoo’s Rich text editor here. You can read my YUI image upload post for more information on the image uploading extension if you need as well.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.0/build/assets/skins/sam/skin.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.0/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.0/build/editor/editor-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.0/build/connection/connection-min.js"></script>
<!-- Visit the previous post on the image uploader to download the image uploader JavaScript -->
<script src="/wp-content/uploads/2007/10/yui-image-uploader.js"></script>
<script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('example_editor', {
 height: '300px',
 width: '522px',
 dompath: true,
 animate: true
});
// Don't forget to change the parameters of your function to point to the correct uploader script.
yuiImgUploader(myEditor, '/wp-content/uploads/2007/12/yui_img_uploader.php','image');
myEditor.render();
</script>


And here is the PHP script that you need to host on your server. This is just an example. I’m not an expert at coding PHP so there are probably bugs/issues with this that I haven’t addressed. Remember, the location on your server that you host this script will need to be the 2nd parameter of the yuiImgUploader function in your JavaScript.

<?php
header("content-type: text/html"); // the return type must be text/html
//if file has been sent successfully:
if (isset($_FILES['image']['tmp_name'])) {
 // open the file
 $img = $_FILES['image']['tmp_name'];
 $himage = fopen ( $img, "r"); // read the temporary file into a buffer
 $image = fread ( $himage, filesize($img) );
 fclose($himage);
 //if image can't be opened, either its not a valid format or even an image:
 if ($image === FALSE) {
  echo "{status:'Error Reading Uploaded File.'}";
  return;
 }
 // create a new random numeric name to avoid rewriting other images already on the server...
 $ran = rand ();
 $ran2 = $ran.".";
 // define the uploading dir
 $path = "editor_images/";
 // join path and name
 $path = $path . $ran2.'jpg';
 // copy the image to the server, alert on fail
 $hout=fopen($path,"w");
 fwrite($hout,$image);
 fclose($hout);
 //you'll need to modify the path here to reflect your own server.
 $path = "/wp-content/uploads/2007/12/" . $path;
 echo "{status:'UPLOADED', image_url:'$path'}";
} else {
 echo "{status:'No file was submitted'}";
}
?>


A couple things to remember:

1. Don’t forget to create the directory that the images will be stored in.
2. Don’t forget to set the file permissions appropriately so your web server can write images to the directory you’re saving in.

Feel free to leave a comment or contact me if you have questions or suggestions.