Image not showing in react-draft-wysiwyg editor using js project

Question

Image not showing in react-draft-wysiwyg editor using js project

I am using text-draft-wysiwyg text editor based on js project in my application. I am facing some problems while trying to upload an image through an image editor. I am using a custom component FileUploader. It saves the image to the server and I also get the correct response containing the uploaded image url. But the image is not showing in the editor. Here is my code for the Editor component:

import React from 'react';
import PropTypes from 'prop-types';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import FileUploader from 'containers/Globals/HtmlEditor/FileUploader';

const HTMLEditor =({editorState, onEditorStateChange}) => {
  return (
    <Editor
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      editorState={editorState}
      onEditorStateChange={onEditorStateChange}
      toolbar={{ image: {
        className: 'editor_uploader',
        component: FileUploader
      }}}
      hashtag={{
        separator: ' ',
        trigger: '#',
        className: 'hashtag-className',
      }}
      mention={{
        separator: ' ',
        trigger: '@',
        suggestions: [
        ],
      }}
    />
  );
}

HTMLEditor.propTypes = {
};

export default HTMLEditor;

Below is my custom Fileuploader component for FileUpload in TextEditor.

import React, {Component} from 'react';
import Dropzone from 'react-dropzone';
import { connect } from 'react-redux';
import { uploadHtmlEditorImagesRequest } from './actions';
import { makeSelectHTMLEditorImageDetailInfo } from './selectors';
import { createStructuredSelector } from 'reselect';

const mapDispatchToProps = dispatch => ({
  uploadHtmlEditorImagesRequest: (file) => dispatch(uploadHtmlEditorImagesRequest(file))
});

const mapStateToProps = createStructuredSelector({
  image_file: makeSelectHTMLEditorImageDetailInfo()
});

const style = {
  borderWidth: 2,
  borderColor: 'black',
  borderStyle: 'dashed',
  borderRadius: 4,
  margin: 30,
  padding: 30,
  width: 200,
  transition: 'all 0.5s'
};

const activeStyle = {
  borderStyle: 'solid',
  backgroundColor: '#eee',
  borderRadius: 8
};

class FileUploader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image_name: ''
    }
  }

  onDrop = files => {
    if (files) {
      this.props.uploadHtmlEditorImagesRequest(files[0]);
    }
  };

  uploadCallback(file) {
    return new Promise(
      (resolve, reject) => {
        resolve({data: {link: "http://www.myfilmviews.com/wp-content/uploads/2012/12/scarlett_johansson.jpg"}});
      }
    );
  }
  componentWillReceiveProps(nextProps) {
    if(nextProps.image_file.get('file_path')) {

      nextProps.image_file
        .entrySeq()
        .map(([key, value]) => {

          if(key==="file_path") {
            this.setState(state => ({
              image_name: value
            }));

            console.log(this.state.image_name)
            this.uploadCallback();
          }
        })
        .toArray();

    }
  }


  render() {
    return (
      <div className="uploader">
        <Dropzone
          className="dropzone"
          onDrop={this.onDrop}
          style={style}
          activeStyle={activeStyle}
          multiple={false}
          accept="image/*"
        >
          Drop files here or <br />
          <span className="btn btn-link">Upload</span> {' '}
        </Dropzone>
      </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);