React-draft-wysiwyg

react.js

import React, { Component } from 'react';
import logo from './logo.svg';

import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateToHTML } from 'draft-js-export-html';
import axios from 'axios'


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      uploadedImages:[]
    };
    this.onChange = (editorState) => {
      this.setState({
          editorState,
          editorContentHtml: stateToHTML(editorState.getCurrentContent())
      });
    };
    this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
  }

  onEditorStateChange = async (editorState) => { 
    await this.onChange(editorState)
    console.log(this.state.editorContentHtml);
  };


  _uploadImageCallBack = async (file) => {
    let uploadedImages = this.state.uploadedImages;

    let imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    }

    const dataForm = new FormData();
    dataForm.append('image', file);

    try {
      const imageData = await axios.post('http://user-dev-dot-jimbaran1.appspot.com/api/user/images', dataForm)
      imageObject.localSrc = imageData.data.data.imageLink
      console.log(imageData);
      
    } catch (error) {
      console.log('ERROR UPLOD IMAGE');
      
    }

    uploadedImages.push(imageObject);

    this.setState({uploadedImages: uploadedImages})
    return new Promise(
      (resolve, reject) => {
        console.log(this.state)
        resolve({ data: { link: imageObject.localSrc } });
      }
    );
  }
  render() {
    const { editorState } = this.state;
    return (
      <div className="App">
        <header className="App-header">

         <Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
toolbar={{
    inline: { inDropdown: true },
    list: { inDropdown: true },
    textAlign: { inDropdown: true },
    link: { inDropdown: true },
    history: { inDropdown: true },
    image: { uploadCallback: this._uploadImageCallBack },
    inputAccept: 'application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel'
  }}
/>
         </header>
      </div>
    );
  }
}

export default App;