Customize nicEdit Image upload to support uploading images to your server

Hey all,

So the last week was awesome, I ended up doing some crazy stuff. But this isnt one of them :D Anyway I was told by a friend that he need a WYSIWYG editor for his project. Naturally nicEdit was my choice. Yet again he needed the support of adding image to the content as well, I mean uploading. So I searched and luckily nicEdit has an upload plugin. So the bad newss? Bad news is it's core is designed to upload the image to imgur and attach the url given by their API.


Problem?

All my images would be gone to imgur, I really dont have much problem with that except that every content I post would be depending on the servers of imgur. What if imgur decided that my content is violating their TOS after sometime? :O (Just kidding, need to make a point)

So I hacked the script a bit and saw that their upload mechanism which is AJAX based isnt overly complicated.Best way to use our server to keep images is to make a php script that would mimic imgur API. Wasn't that hard. First let's see how the existing nicEdit upload works.

nicEdit upload process

1) User upload image
2) nicEdit make a creates a POST request to the imgur API
3) API key is added to request
4) Img is added as if it's being uploaded using a HTML form (POST content is send as a multipart form)
5) Request is send to imgur, if everything is fine imgur API responds with a JSON object containing different info about the image
6) nicEdit attach the image using the link send found in the JSON object

Writing something to mimic the imgur API

Script will be written in php but you're free to make it in any language as long as you correctly capture the request and return a correctly formatted JSON object

Request

Request as I mentioned before is as if it's comming from a HTML file upload form. Basically your image data would be available from $_FILES array. From there on we follow the simple php uploader mechanism that is,

1) Check whether the image is a valid image type, to prevent attacks
2) Move the image file from the php temp directory to our img directory
3) Rename it with something unique, I usually do random() or md5() functions for the new name
4) Get the URL to the uploaded image

NOTE:

At this stage you could choose between giving the user a direct URL to the image or making another php script that would return the image data with headers. Well it's more secure, but too much of a trouble. I will continue as if we are giving the direct link to the image.

Response

This is indeed the tricky part. Even if we return the URL to the nicEdit plugin it won't work since it's expecting a JSON object from imgur and I dont want to hack apart everything from the script (No one does :S). This is how the return JSON object would look like (Included ONLY the parts important to ur)

Response (JSON Object)
    - upload => (Array)
                          - links => (Array)
                                           - original =>  (URL of img)
                         - image => (Array)
                                           - width => width of image
                                           - height => height of image

Rest is just simple, we make a JSON object just like this and return :) So let's start

Code

img.php

1. <?php
3. //Check if we are getting the image
4. if(isset($_FILES['image'])){
5.         //Get the image array of details
6.         $img = $_FILES['image'];       
7.         //The new path of the uploaded image, rand is just used for the sake of it
8.         $path = "upload/" . rand().$img["name"];
9.         //Move the file to our new path
10.         move_uploaded_file($img['tmp_name'],$path);
11.         //Get image info, reuiqred to biuld the JSON object
12.         $data = getimagesize($path);
13.         //The direct link to the uploaded image, this might varyu depending on your script location    
14.         $link = "http://$_SERVER[HTTP_HOST]"."/nicedit/".$path;
15.         //Here we are constructing the JSON Object
16.         $res = array("upload" => array(
17.                                 "links" => array("original" => $link),
18.                                 "image" => array("width" => $data[0],
19.                                                  "height" => $data[1]
20.                                                 )                              
21.                     ));
22.         //echo out the response :)
23.         echo json_encode($res);
24. }
26. ?>

NOTE:

1) All image are uploaded to a directory named upload, so make sure that dir exists and is CHMOD to 777 (Given read/write permission)
2) Change line 14 to suit your server path

Now we need to tell nicEdit that we are having our own upload script, luckily it's easy.

Open the nicEdit.js (if you download the whole thing with nicUpload plugin).
Find the line starting like xhr.open("POST"... 
Replace it with

xhr.open("POST", "http://example.com/path_to_above_script/img.php");


DONE ! Now try uploading something and it would go directly to your server :)

Be back soon !

EDIT

Some of the comments below suggested that the response array should be changed like following for it to work correctly. I think it should be an issue with the latest nicEdit script. So if you are having troubles please try with this code for the '$res' array
Special thanks for jjsteing for pointing the new code

1.         $res = array("data" => array(
2.                                 "links" => $link),
3.                                 "width" => $data[0],
4.                                 "height" => $data[1]
5.                                      ));