CKEDITOR Image upload - fileUploadResponse event is not firing

Question

I am trying to integrate CKEditor in Angular App. In CKEditor, I am trying to use uploadimage. In run method of my app I have written following code to listen the events of CKEditor.

 CKEDITOR.on( 'instanceCreated', function( event ) {
            console.log("CKEditor instance created");
 });

  CKEDITOR.on( 'fileUploadResponse', function( evt ) {
                // Prevent the default response handler.
                console.log("Image Uploaded");
                evt.stop();

                // Ger XHR and response.
                var data = evt.data,
                    xhr = data.fileLoader.xhr,
                    response = xhr.responseText.split( '|' );

            if ( response[ 1 ] ) {
                // Error occurred during upload.
                data.message = response[ 1 ];
                evt.cancel();
            } else {
                data.url = response[ 0 ];
            }
            console.log("Image Uploaded");
 } );

In console it is printing CKEditor instance created, but not printing Image Uploaded. Somehow it is not listening to fileUploadResponse event.

My config file of CKEditor is as follow:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
    config.extraPlugins = 'uploadimage';
    config.uploadUrl = '/notice/fileupload';
};

Everything is working fine and my image file is also uploading successfully and I am getting following JSON response:

{
    "uploaded": 1,
    "fileName": "checkout.PNG",
    "url": "/img/syllabus/checkout.PNG",
    "error": null
}

But fileUploadResponse is not firing after so many tries. I am not sure which part I am missing.

Answer 1

I think the 'fileUploadResponse'-Event has to be registered on the ckeditor-instance and not on CKEDITOR itself.

var editor = $( 'textarea#editor1' ).ckeditor();
editor.on( 'fileUploadResponse', function( evt ) {...});