Can 'Send to the Server' button functionality be by-passed in CKEDITOR image plugin?

Question

In the upload tab of the Image plugin in CKEDITOR, user has to first choose file from the computer and then has to click 'Send to the Server' button to send the file to the server and fill the UI elements in the info tab.

Now I looked at the code of the upload tab.It is like this -

{
            id: 'Upload',
            hidden: false,
            filebrowser: 'uploadButton',
            label: lang.uploadTab,
            elements: [
                {
                    type: 'file',
                    id: 'upload',
                    label: lang.btnUpload,
                    style: 'height:40px'
                },
                {
                    type: 'fileButton',
                    id: 'uploadButton',
                    filebrowser: 'info:src',
                    label: lang.btnUpload,
                    'for': [ 'Upload', 'upload' ]
                }
            ]
        }

It has no full description of how the button 'Send to the Server' is added to the dialog.I actually do not want to make it fussy for the user to first choose the image and then manually click the button to send the image to the server.

How can I automate the process of sending the image to the server and filling the UI elements of the info tab?

I mean user should just Choose a file, after the file is chosen, image should be automatically sent to the server and all the UI elements of the info tab should get filled with the image properties.After it user can click 'OK' or 'Cancel' to render the image on editor as usual.

Answer 1

I had this same problem and found a solution that works well. I attached an onChange listener to the file chooser, and when that triggers I simulate clicking the send to server button. I've also hidden that "Send it to the Server" button since the user no longer needs to click it. The tricky part here was figuring out how to get the references to the needed objects.

CKEDITOR.on('dialogDefinition', function(ev) {
    // Take the dialog window name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image2') {
        // Get a reference to the "Upload" tab.
        var uploadTab = dialogDefinition.getContents('Upload');
        // Get the "Choose file" input definition.
        var fileChooserDef = uploadTab.get('upload');
        // Get the "Send it to the Server" button definition, and hide that button.
        var sendButtonDef = uploadTab.get('uploadButton');
        sendButtonDef.hidden = true;

        // When a file is chosen, automatically send it to the server.
        fileChooserDef.onChange = function() {
            // Get the "Send it to the Server" button element.
            var sendButton = this.getDialog().getContentElement('Upload', 'uploadButton');
            // Simulate clicking that button.
            sendButton.click();
        };
    }
});

Now the user just needs to click "Choose File" and once they've select something it immediately pops them over to the "Image Info" tab with everything filled in.

I'm using the Django-Ckeditor project and I've put this code in ckeditor/static/ckeditor/ckeditor-init.js, inside initialiseCKEditor().