Upload images to s3, and update the editor state. about medium-draft HOT 4 CLOSED

<MyEditor
         editorState={this.state.editorState} onChange={this.onChange} />

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.sideButtons = [{
      title: 'Image',
      component: CustomImageSideButton,
    }];
    this.state = {
      editorState:  this.props.editorState || createEditorState(), 
    // here is the bug, I'm interpreting that the context of data is on the parent, 
    // so it returns error _Uncaught Error: Cannot set unknown key "data" on ContentBlock_ 
    // when I type and press enter or when I try to upload the image, 
    // Thats why I don't get the image displayed 
    // To fix it, I removed this this.props.editorState || and it works
    };


    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }
  ...
}

  onChange(e) {
    const file = e.target.files[0];
    if (file.type.indexOf('image/') === 0) {
      api
      .get(`/getSignedUrl?folder=news&filename=${file.name}&filetype=${file.type}`)
      .then(response => {
        const signedUrl = response.data.url
        const options = {
          headers: {
            'Content-Type': file.type
          }
        }
        // put to aws
        return axios.put(signedUrl, file, options)

      })
      .then(response => {
        // second step save the data to our database
         this.props.setEditorState(addNewBlock(
           this.props.getEditorState(),
             Block.IMAGE, {
               src: response.request.responseURL.split("?")[0],
             }
           ));
      })
      .catch(e => console.log('Error Uploading in blog', e))
    }
    this.props.close();
  }

<MyEditor ref="myeditor" />

this.refs.myeditor.state.editorState.getCurrentContent()