The image is correctly send to the server and gets upload, but for some reason the editor shows an alert that says ‘Cannot Upload’.

This is the React Component where I have the config of CKEditor:

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const PostEditor = ({ onChange, value }) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        ckfinder: {
          uploadUrl: "http://127.0.0.1:8000/api/image/list/",
        },
        upload: {
          dataType: "multipart", 
        },
      }}
      data={value}
      onChange={(event, editor) => {
        const data = editor.getData();
        // console.log(event);
        // console.log(editor);
        console.log(data);
        onChange(data);
      }}
    />
  );
};

export default PostEditor;

This is the error:

CKEditor5 Upload Error

The explorer where I selected the image doesn’t showed up in the recording.

As you can see, the editor make a post request whenever you try to add some image to the post, as it should be, then the image gets uploaded, but the editor can’t read the image, I don’t know why. Maybe I’m missing some configs so the editor can track the url?

It is my first time using CKEditor. Any help would be useful, thanks!

Upload images to CKEditor.

Images uploaded to backend server and charge them in the post.

CKEditor: Upload Error. Although the images were send correctly