Issue displaying uploaded images in Jodit-React

Question

I am using Jodit-React for a rich text editor in my React application, and I'm facing difficulties displaying images that I upload. I've tried multiple solutions, but the images don't appear in the editor.

<JoditEditor
        ref={editor}
        value={content}
        config={config}
        tabIndex={1} // tabIndex of textarea
        {...props}
    />

Upload config

const config = useMemo(() => ({
    readonly: false, // all options from https://xdsoft.net/jodit/docs/,
    enableDragAndDropFileToEditor: true,
    placeholder: 'Start typings...',
    uploader: {
        url: 'http://localhost:8000/api/upload-image',
        imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
        //headers: {"token":`${db.token}`},
        withCredentials: false,
        pathVariableName: 'path',
        format: 'json',
        method: 'POST',
        prepareData: function (formData) {
            var file = formData.getAll('files[0]')[0]
            formData.append('image', file)

            formData.delete('files[0]')
            formData.delete('path')
            formData.delete('source')

            return formData
        },
        isSuccess: function (resp) {
            // console.log("resp", resp);
            return !resp.error;
        },
        getMessage: function (resp) {
            // console.log("resp",resp);
            return resp.msgs.join("\n");
        },
        process: function (resp) {
            const imageUrl = resp?.imageUrl;

            return imageUrl ;
        },
    }
}), []);

I expect the images to be displayed in the Jodit editor after uploading.

The images do not appear, and not getting any error.

How can I properly display images in the Jodit editor after uploading? Are there any specific configurations or additional steps I need to take? Any help or guidance would be greatly appreciated!

Answer 1

With this change it finally works for me and shows the image

      defaultHandlerSuccess: async function(data, resp){
        const imageUrl = resp?.imageUrl;
        this.selection.insertImage(imageUrl, null, 250);
      },

Answer 2

If you would like to insert image with its original width, I used this:

    defaultHandlerSuccess: function (data, resp) {
      const files = data.files || [];
      if (files.length) {
        let imageWidth = 250;
        let img = new Image();
        img.src = files[0];
        img
          .decode()
          .then(() => {
            imageWidth = img.width;
          })
          .finally(() => {
            this.jodit.selection.insertImage(files[0], null, imageWidth);
          });
      }
    },