File upload hack: external upload button

I don't know if I am allowed to post something about figuring out how to make a picture upload mechanism for ckeditor 4. I realize ckeditor has CKFinder, a commercial product. Being poor, I had to figure out another way to integrate file uploads, so I made a pretty reliable system for that.

It uses the iframe hack, rather than a jquery xmlrh, because IE 9 and lower do not support file uploads via Ajax. But, actually, the iframe is set to display:none, and is completely unobtrusive and very reliable.

You have to set up a folder and a path for where you want your images files uploaded. It requires an external file upload field in your form, so there is no "Browse" button in your ckeditor. But, the image, once it is uploaded, does show up in your ckeditor window, and of course you can reposition/resize using the usual ckeditor tools.

If there is any interest in this subject, I can post code and would love to discuss it.

• The method requires a second form, placed immediately above the main text editor form.
• In your new form tag, include these properties:  target="target" enctype="multipart/form-data"
• Add a max file size hidden input field: <input type="hidden" name="MAX_FILE_SIZE" value="50000000" />
• Add a hidden field named "filename": <input type="hidden" name="filename" value="" />
• Add an iframe in your html body with the name "target" (to match the target name specified in your form tag): <iframe name="target" id="target"></iframe>
• Close the new form.

Because I wrote this edit page as a cms for a client, the options in the select fields represent folders (actually websites in a master hosted account), with pages for each website (4 pages per website/folder). You will want to change the options names/values to whatever reflect the folder/page you are editing. Of course, this is not a cross domain solution, so it only works on subfolders of the present domain (I said they were separate websites, but the website folders are still subfolders of the present domain).

When you select the file you want to upload (must be an image file, in this version) it triggers an onchange event, which causes the first form to submit, and in turn, upload your picture file. Of course the page will not reload, as that is the advantage of using a target iframe in the form (the so-called "iframe hack", which mimicks an ajax post).

The submit happens on line 33 of the javascript function "placePic()".

As for the javascript, I use the CKEDITOR.instances.editor.getData() to get whatever is in the ckeditor window, because we want to append to it, not overwrite it.

Because files take some time to upload, we want to stall the process until the file is detected as uploaded. Two techniques are used here: the setInterval method, to keep running laps every 100 milliseconds and testing if the file is uploaded in each interval iteration. The way this is done (thank you Stackoverflow) is to dynamically create a new image, point its source to the newly uploaded image path, and test for a height. If a height exists. If a height exists for the source, it is because there is an image file there, and the image is considered to have been uploaded. See the ImageExist(url) function on line 24 as an example of how the upload success test is performed.

If not successful, a load graphic image is dynamically created and placed in the middle of the ckeditor window (lines 46-57).

If successful, then the load graphic is removed, a CKEDITOR.instances.editor.setData is performed (line 42) which puts the image tag, with source, in the ckeditor window, and finally a clearInterval is performed to stop the setIterval cycle.