Upload Image: Cannot read property 'setCustomD

Question

I am trying to embed into the editor an uploaded image. My filebrowserUploadUrl is /api/m/image and it seems to be working fine. After I clicked the Send it to the Server button, there is a script error as follows:

image.js?t=H4PG:19 Uncaught TypeError: Cannot read property 'setCustomData' 
of undefined
  at textInput.onChange (image.js?t=H4PG:19)
  at textInput.n (ckeditor.js:10)
  at textInput.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
  at textInput.setValue (ckeditor.js:619)
  at textInput.setValue (ckeditor.js:545)
  at a.q (ckeditor.js:841)
  at ckeditor.js:31
  at Object.callFunction (ckeditor.js:31)
  at image?CKEditor=editor&CKEditorFuncNum=1&langCode=en:1

The last line in the above is the call to filebrowserUploadUrl and the response from that is:

window.parent.CKEDITOR.tools.callFunction(1, '/images/bulletins.jpg', 'Uploaded successfully');

The Uploaded successfully message is shown in an alert. The Preview box under Image Info tab is not updated. But if I clicked OK to close the dialog, the image (bulletins.jpg) is embedded in the editor alright.

What could be causing the error and how do I fix it?

---

I found what was causing it. I wanted to set the default tab when the insert image dialog is launched to the Upload tab. I use the following code:

CKEDITOR.on("dialogDefinition", function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName === "image") {
    dialogDefinition.onShow = function() {
      this.selectPage("Upload");
    }
  }
});

When the above code is used, that error happens when a file is uploaded.

Answer 1

I was having same issue, and after using proposed solution from vikram, editor was generating error while pasting image link into the text. Better approach here, not to completely override default onShow method, but add more to it in the following way:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image') {

        var oldOnShow = dialogDefinition.onShow;
        var newOnShow = function () {
            this.selectPage('Upload');
            this.hidePage('Link');

            // change tabs order
            $('a[title=Upload].cke_dialog_tab').css('float', 'left');
        };

        dialogDefinition.onShow = function () {
            oldOnShow.call(this, arguments);
            newOnShow.call(this, arguments);
        };
    }
});

Answer 2

After debugging a lot I found a solution on this.

If you will see onChange method of txtUrl textBox in image.js See line number 507 and 513 you will understand cause of this error.

at line 513 setCustomData is called.

original.setCustomData( 'isReady', 'false' );

CKEDITOR.on("dialogDefinition", function(ev) {
  var dialogName = ev.data.name;

  //current editor
  var editor = ev.editor;
  var dialogDefinition = ev.data.definition;

  if (dialogName === "image") {
    dialogDefinition.dialog.on('show', function(e){
      var dialogBox = e.sender;

        //This line is the answer of your question
       //this line will get rid of the error setCustomData
      dialogBox.originalElement = editor.getSelection().getStartElement();
      this.selectPage("Upload");
    });
  }
});