React-draft-wysiwyg: Image upload preview not working

[Fireprufe15]

When uploading an image with this component, in the demo that is in the documentation, it shows a preview of the image that is uploaded. We attempted to implement this component on our site, but instead of a preview of the image it just shows the URL to the image, the text isn't even properly bound to the box it is contained in.

This is the code we used:

const HTMLEditor = (props) => {

  /*function uploadImageCallBack(file) {
    props.uploadImageCallBack(file);
  } */

    return (
        <div className="text-editor">
          <Editor
            toolbar={{
              inline: { inDropdown: true },
              list: { inDropdown: true },
              textAlign: { inDropdown: true },
              link: { inDropdown: true },
              history: { inDropdown: true },
              image: { uploadCallback: props.uploadImageCallBack, alt: { present: true, mandatory: false },
              inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg', },
            }}    
          />   
        </div>
    );

}

Are we doing anything explicitly wrong for it not to work or is this a problem with the component?

[tgus]

Add

previewImage: true

to the toolbar _image_ key:

image: {previewImage: true, ...}

[jpuri]

Please check this : https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/ImageUpload/index.js#L6

You need to provide an upload function which return url of uploaded image in format. Promise should resolve to return an object { data: { link: <THE_URL>}}.

[changle110]

支持from表单上传么

[ravi-kumar-beniwal]

Please check this : https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/ImageUpload/index.js#L6

You need to provide an upload function which return url of uploaded image in format. Promise should resolve to return an object { data: { link: <THE_URL>}}.

Thanks, I am looking how to give a response back to the uploadImage callback.