add image upload version

Author: qatoco

AddImageButton/index.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import insertDataBlock from 'draft-js-buttons-plugin/lib/utils/insertDataBlock.js';
+import axios from 'axios';
+
+const token = `?token=f9403fc5f537b4ab332d`;
+
+export default class imageButton extends Component {
+  onClick = e => {
+    e.preventDefault();
+    ReactDOM.findDOMNode(this.refs.fileInput).click();
+  };
+
+  inputChange = async e => {
+    const file = e.target.files[0];
+    const params = new FormData();
+    params.append('file', file);
+    const response = await axios.post(`http://localhost:25478/upload${token}`, params, {
+      headers: { 'Content-Type': `multipart/form-data; boundary=${params._boundary}` }
+    });
+    const imageData = { src: `http://localhost:25478/${response.data.path}${token}`, type: 'placeholder' };
+    this.props.setEditorState(insertDataBlock(this.props.getEditorState(), imageData, 'image'));
+  };
+
+  preventBubblingUp = event => {
+    event.preventDefault();
+  };
+
+  render() {
+    const { theme } = this.props;
+    return (
+      <div className={theme.buttonWrapper} onMouseDown={this.preventBubblingUp}>
+        <button className={theme.button} onClick={this.onClick} type="button">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M18.222 6H5.778C4.8 6 4 6.6 4 7.333v9.334C4 17.4 4.8 18 5.778 18h12.444C19.2 18 20 17.4 20 16.667V7.333C20 6.6 19.2 6 18.222 6zm-4.084 4l-3 4.51L9 11.503 6 16h12l-3.862-6z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+
+        <div className={theme.addImage}>
+          <input type="file" ref="fileInput" onChange={::this.inputChange} style={{ display: 'none' }} />
+        </div>
+      </div>
+    );
+  }
+}

index.js

@@ -4,9 +4,9 @@ import { EditorState, ContentState } from 'draft-js';
 import Editor, { composeDecorators } from 'draft-js-plugins-editor';
 import createImagePlugin from 'draft-js-image-plugin';
 import createResizeablePlugin from 'draft-js-resizeable-plugin';
-import { AddImageButton } from 'draft-js-buttons-plugin';
 import { BlockquoteButton } from 'draft-js-buttons';
 import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
+import AddImageButton from './AddImageButton';
 import 'draft-js-side-toolbar-plugin/lib/plugin.css';
 
 const resizeablePlugin = createResizeablePlugin();

package.json

@@ -7,6 +7,7 @@
   "devDependencies": {
     "babel-core": "^6.7.6",
     "babel-loader": "^6.2.4",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
@@ -17,6 +18,7 @@
     "webpack-dev-server": "2.11.5"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "draft-js": "0.10.1",
     "draft-js-buttons-plugin": "^1.2.0",
     "draft-js-divider-plugin": "^0.2.1",

webpack.config.js

@@ -1,7 +1,7 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: './index.js',
+  entry: ['babel-polyfill', './index.js'],
   devtool: 'inline-source-map',
   output: { filename: 'bundle.js', publicPath: '' },
   module: {