CODE EXAMPLE FOR JAVASCRIPT

ckeditor image upload react

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

export default function TextEditor({ message = "", value, setData, name }) {
  function uploadAdapter(loader) {
    return {
      upload: () => {
        return new Promise((resolve, reject) => {
          var formData = new FormData();
          formData.append("name", "Ali Hamza");
          loader.file.then((file) => {
            formData.append("files", file);

            axios
              .post(route("imageUpload"), formData)
              .then((res) => res.json())
              .then((res) => {
                resolve({
                  default: `/${res.filename}`,
                });
              })
              .catch((err) => {
                reject(err);
              });
          });
        });
      },
    };
  }
  function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return uploadAdapter(loader);
    };
  }
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        extraPlugins: [uploadPlugin],
      }}
      data={value}
      onChange={(event, editor) => {
        const data = editor.getData();
        setData((prevState) => ({
          ...prevState,
          [name]: data,
        }));
      }}
    />
  );
}