defaultHandlerSuccess is not working.

[MustafaAgami]

I have implemented jodit-react with the help of official documentation provided and it is working fine in uploading the image to the content server but I am getting an error in defaultHandlerSuccess as Cannot read properties of undefined (reading 'insertImage')

Jodit-react Version: 1.3.39

Browser: Chrome OS: Linux Is React App: True

Code

const config:any={
    "placeholder":"start typing....",
    "showCharsCounter": false,
    "showWordsCounter": false,
    "showXPathInStatusbar": false,
    "buttons": "bold,italic,underline,strikethrough,source,fullsize,preview",
    "uploader": {
      url: 'http://localhost:3001/content/upload',    
      isSuccess: function (resp:any) {
        return !resp.error;
      },
      process: function (resp:any) {
        console.log('Process ',resp);
        return {
          files: resp.data.files || [],
          path: resp.data.path,
          baseurl: resp.data.baseurl,
          error: resp.data.error,
          msg: resp.data.msg
        };
      },
      defaultHandlerSuccess: function (data:any, resp:any) {
        var i,
          field = 'files';
        if (data[field] && data[field].length) {
          for (i = 0; i < data[field].length; i += 1) {
            const imgUrl = data.baseurl + data[field][i];
            console.log(imgUrl)
            this.s.insertImage(data.baseurl + data[field][i]);
          }
        }
      },
    },
  }

Expected behavior: The image should be successfully displayed in the Editor

Actual behavior: Image is not displaying in the Editor and giving error as: Cannot read properties of undefined (reading 'insertImage')

[mpeix]

Hi, I am facing the same error.

For some reason when reading 'this' is null

[mpeix]

Hello,

I found what was happening. In my case I was using an arrow functions and it was not catching property the "this" parameter.

In your case @MustafaAgami, you should change you call to insertImage functions. That function uses three parameters.

You can use it like that: insertImage(data.baseurl + data[field][i], null, 250), where 250 is the image default with.

[MustafaAgami]

I think this repo is not updated i am using jodit original and it is working fine

[xdan]

This is not a Jodit bug. You are using JavaScript incorrectly. You are using "this" inside defaultHandlerSuccess but the types say "this: IUploader". It doesn't have the "s" field, only Jodit has it You need to use useRef, store a reference to the Jodit instance there and then use it in your code. Like that:

function App() {
    const jodit = useRef(null);
    const config = useMemo(() => ({
       //...,
       defaultHandlerSuccess() {
           //...
           jodit.current.s.insertImage(...)
       }
    }));
    return <JoditEditor ref={jodit} config={config}/>
}

[MustafaAgami]

Still it is not working @xdan I am getting an error with this code...

function App() {
  const editor = useRef(null);
    const [content, setContent] = useState('');
  const config={
    "buttons": "bold,italic,underline,strikethrough,source,fullsize",
    "placeholder":"start typing?....",
    "showCharsCounter": false,
    "showWordsCounter": false,
    "showXPathInStatusbar": false,
    "uploader": {
      url: 'http://localhost:3001/knowledgebase/upload',
      isSuccess: function (resp) {
        return true;
      },
      process: function (resp) {
        console.log('Process ',resp);
        return {
          files: resp.data.files || [],
          path: resp.data.path,
          baseurl: resp.data.baseurl,
          error: resp.data.error,
          msg: resp.data.msg
        };
      },
      defaultHandlerSuccess: function (data, resp) {
        var i,
          field = 'files';
        if (data[field] && data[field].length) {
          for (i = 0; i < data[field].length; i += 1) {
            const imgUrl = data.baseurl + data[field][i];
            console.log(imgUrl)
            //this.s.selection.innerHTML("<h1>hiii</hi>")
            editor.current.s.insertImage(data.baseurl + data[field][i]);
          }
        }
      },

    },

  }
  return (
    <JoditEditor
            ref={editor}
            value={content}
            config={config}
            onBlur={newContent => setContent(newContent)} 
        />
  );
}

Error:

[HaTrang1386]

I fix it by create and using the _this variable as shown below Remember not using arrow functions

defaultHandlerSuccess: function (data, resp) {
  var i,
    field = 'files';
  const _this = this.jodit ?? this
  if (data[field] && data[field].length) {
    for (i = 0; i < data[field].length; i += 1) {
      _this.s.insertImage(data.baseurl + data[field][i]);
    }
  }
},