MarkdownUpload.jsx

import React from 'react'
import Dropzone from 'react-dropzone'
import fm from 'front-matter'
import { Editor, EditorState, convertFromRaw } from 'draft-js'
import { markdownToDraft } from 'markdown-draft-js'
import './App.css'

const styles = {
  fontFamily: 'Operator Mono, sans-serif'
}

let reader = new FileReader()

class MarkdownReader extends React.Component {
  state = { files: [], content: '', title: '', editorState: EditorState.createEmpty() }

  setContent = files => {
    reader.onload = e => {
      let md = fm(reader.result)
      console.log(md)

      return this.setState({
        files,
        title: md.attributes.title || '',
        editorState: EditorState.createWithContent(
          convertFromRaw(markdownToDraft(md.body))
        )
      })
    }

    reader.readAsText(files[0])
  }

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

  onDrop = files => this.setState(this.setContent(files))

  render() {
    const { editorState, title } = this.state
    let ContentState = editorState.getCurrentContent()
    return (
      <div>
        <Dropzone
          onDrop={this.onDrop}
          multiple={false}
          disableClick
          disabled={ContentState.hasText()}
          style={{ border: `1px solid red`,margin: 'auto', maxWidth: 640 }}>
          <input style={{ fontSize: 32, display: 'block',  width: '100%', }} value={title} onChange={({ target }) => this.setState({ title: target.value })} />

          <Editor
            editorState={editorState}
            onChange={this.onChange}
          />
        </Dropzone>
      </div>
    )
  }
}

export default () => (
  <div style={styles}>
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
    <MarkdownReader />
  </div>
)