In Next js App, user uploaded image via API and it returns me Images in array, How to embed those image into CKEditor 5

Question

Basically instead of using CKEditor to upload image i use my own api to upload image

Whenever user in my website upload any image, i call API and posting those images to that API, it safely uploads images and returning me URL which is uploaded in Public Domain, Below object returned by API,

{
    "uploadedUrls": [
        "http://example.com/community/question/insta.jpg",
        "http://example.com/community/question/pin.jpg"
    ]
}

and In my next js website the function behind API is working like this

  const handleUpload = async () => {
  const fileInput = document.getElementById('file-upload'); 
  if (fileInput && fileInput.files.length > 0) {
    const formData = new FormData();
    const files = Array.from(fileInput.files);

    files.forEach((file, index) => {
      formData.append("files", fileInput.files[index], file.name);
    });

    formData.append("folderName", "community/question");

    try {
      const uploadImage = await communityDTO.uploadImage(formData);
      if (uploadImage) {
        if (typeof uploadImage.uploadedUrls === 'string') {
            uploadImage.uploadedUrls = [uploadImage.uploadedUrls];
        }
        console.log(uploadImage); //This is also working very good
        uploadImage.uploadedUrls.map((item)=>(
            setInputBody(inputBody + "\n" + 
                <img className="my-2" src={item} alt={"Image " + item} />
            ))
        );
      }
    } catch (error) {
      console.error('Error:', error);
    }
  } else {
    console.error('No files selected');
  }
};

In my console i get perfect success result from console.log(uploadImage)

And my CKEditor looks like this

<CKEditor
    editor={ClassicEditor}
    data={inputBody}
    onChange={(event, editor) => {
    const data = editor.getData();
    setInputBody(data); //inputBody is useState hook
    }}
    config={{
    toolbar: {
        items: [
        "undo",
        "redo",
        "|",
        "bold",
        "italic",
        "blockQuote",
        "link",
        "numberedList",
        "bulletedList",
        "|",
        "heading",
        ],
        shouldNotGroupWhenFull: true,
    },
    placeholder: "Write your Answer...",
    }}
/>

Everything is working fine and let me show u how inputBody i have declared const [inputBody, setInputBody] = useState("");

Whenever i upload image the image should be embedded in CKEditor even if i upload Multiple images...

i am updating inputBody like below code when API returns successfully image uploading

uploadImage.uploadedUrls.map((item)=>(
   setInputBody(inputBody + "\n" + 
      <img className="my-2" src={item} alt={"Image " + item} />
   ))
);

But the result i am getting is just like below image

Output Image

The result i get is like [object Object] instead of embedding image

(Wow, Now i realised how stackoverflow is working with image uploading like this [description](imageurl)), It would be cool if CKEditor free version supports like this, idk if it actually supports if yes then please suggest me, but please help me with my above code...

Answer 1

Error: Solved

I solved it by my own, the thing i modified is just created instance of ckeditor by useRef hook, i already tried it but it wasn't working so i did not mentioned earlier...

The below code provided by chatGPT but still don't know it was not working

const editor = editorRef.current.editor; // Access CKEditor instance from the ref
  uploadImage.uploadedUrls.forEach(url => {
   editor.model.change(writer => {
      const imageElement = writer.createElement('image', {
         src: url // Set the source URL for the image
      });
      editor.model.insertContent(imageElement);
   });
});

but the new code i modified by my self within instance of editor

const editor = editorRef.current.editor; // Access CKEditor instance from the ref

   uploadImage.uploadedUrls.forEach(url => {
      editor.model.change(writer => {
         editor.setData( `${inputBody} \n <img src=${url} alt=${url} />` );
   });
});

Above code is working very well but i think it's inappropriate use of writer but still it's working, so i am not going to touch this code now...

Thankyou StackOverflow