react-draft-wysiwyg The converted base64 for image is overflowing from the upload image field

I have a working react-draft-wysiwyg editor application. I am able to add images to editor using this. There is one issue i am facing , please check this below :

Here's the code so far what i've tried. And note that for display purpose even if i pass truncatedUrl inside callback the error is "Invalid URL passed" ,

So basically what i am trying to do is show some small string inside the "File Upload" Box but when i click on "Add" the complete image URL needs to be passed.

Here's what i've tried so far:

import {Editor} from "react-draft-wysiwyg";
import { EditorState, ContentState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

  const [editorState, setEditorState] = useState(EditorState.createEmpty())

 useEffect(() => {
    let html = stateToHTML(editorState.getCurrentContent())
    setContent(html)
  }, [editorState])

  const handleEditorChange = (state) => {
    setEditorState(state);
    const selectedBlock = state.getCurrentContent().getBlockForKey(
      state.getSelection().getStartKey()
    );
    const selectedEntity = selectedBlock.getEntityAt(
      state.getSelection().getStartOffset()
    );
    if (selectedEntity !== null) {
      if (typeof selectedEntity.getData === 'function') { // add this check
        const image = selectedEntity.getData().url;
        setImageFile(image); // remove data URL prefix
      } else {
        console.error('selectedEntity does not have getData method');
      }
    } else {
      setImageFile(null);
    }
  };


  const addLesson = async () => {
    setIsUploading(true);

    try {
      const formData = new FormData();
      formData.append('name', title);
      formData.append('content_type', contentType);
      if (contentType === 'text' && content) {
        formData.append('content', content);
      }
      if (contentType === 'video' && video) {
        formData.append('content', video);
      }
      formData.append('course_id', course_id);
      formData.append("imageFile", imageFile);

      const response = await axios.post(url() + 'api/admin/lessons', formData);
      if (response?.status === 200) {
        setSuccess('Lesson successfully added.');
        window.setTimeout(() => {
          history.push(`/course/${course_id}/lessons`);
        }, 1000);
      }
    } catch (error) {
      console.error(error);
      setError(error?.response?.data?.msg);
    }

    setIsUploading(false);
  };


return (

   <div className="row m-3">
                <h6 className="edit-box-label ml-2">Lesson Content</h6>
                <div className="col-xl-12">
                   <Editor
                     editorState={editorState}
                     onEditorStateChange={handleEditorChange}
                    toolbar={{
                      image: {
                        uploadCallback: (file) => {
                          return new Promise((resolve, reject) => {
                            const reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onload = () => {
                              const dataURL = reader.result;
                              const truncatedDataURL = dataURL.substring(10, 30) + "..."; // set the maximum length of the truncated string
                              resolve({ data: { link: dataURL } , link : { url : truncatedDataURL} });
                            };
                            reader.onerror = (error) => {
                              reject(error);
                            };
                          });
                        },
                        alt: { present: true, mandatory: false }
                      }
                    }}
                   />
                </div>
              </div>
)

Requesting help regarding this , all your efforts are appreciated.

Regards,

Add props image

toolbar={{
image:{
  "previewImage": true,
  ...,
},
...
}}

for convert your base64 preview to image preview