How to add an extra input field - Image upload

Ha ha,

found by myself that I can do it this way (before init):

  CKEDITOR.on('dialogDefinition', function(ev)
   {
     var dialogName = ev.data.name;
     var dialogDefinition = ev.data.definition;
     if (dialogName == 'image')
     {
        for (var i in dialogDefinition.contents)
        {
           var contents = dialogDefinition.contents[i];
           if (contents.id == "Upload")
           {
              contents.elements.splice(contents.elements.length - 1, 0, {
              type : 'text',
              id : 'field1',
             label : 'Field 1',
            });
              contents.elements.splice(contents.elements.length - 1, 0, {
             type : 'text',
             id : 'field2',
             label : 'Field 2',
           });
           }
        }
     }
   });

Seem like there is no way to add extra form fields to the upload form just because the file field is auto-generated to be contained into an IFRAME (this allows to do file uploads without reloading the page in browser).

I found no way to do it with the current API.

The fields are added to the dialog, but outside of the IFRAME so when you submit the file there is no extra data send to the server.

I had to hack into code, it's not that hard to do it, just need to insert the extra HTML for the new fields into the code where the IFRAME creation code is. And a second thing, change the IFRAME height (and the two parent DIV's) as they all are set via CSS (there is a point after the IFRAME is loaded where the code can be inserted).

I have done it with two functions, so the output can be changed from instance to instance and even let the default behavior kick in.

It would be nice if in a newer API version this will be included out of the box. It can be used to submit author name (for example) beside the image ... and draw a watermark over the image (server side).

Happy hacking!