Skip to content

Commit 732854e

Browse files
qatocoqatoco
authored
Merge pull request #12 from qatoco/demo-with-image-upload
Demo with image upload
2 parents eaecb33 + caddad7 commit 732854e

File tree

8 files changed

+164
-782
lines changed

8 files changed

+164
-782
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
docsgit

‎AddImageByURLButton.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import insertDataBlock from 'draft-js-buttons-plugin/lib/utils/insertDataBlock.js';
4+
import axios from 'axios';
5+
6+
const token = '?token=token';
7+
const serverURL = 'http://localhost:25478';
8+
9+
export default class imageButton extends Component {
10+
onClick = e => {
11+
e.preventDefault();
12+
ReactDOM.findDOMNode(this.refs.fileInput).click();
13+
};
14+
15+
inputChange = async e => {
16+
const file = e.target.files[0];
17+
const params = new FormData();
18+
params.append('file', file);
19+
const response = await axios.post(`${serverURL}/upload${token}`, params, {
20+
headers: { 'Content-Type': `multipart/form-data; boundary=${params._boundary}` }
21+
});
22+
const imageData = { src: `${serverURL}/${response.data.path}${token}`, type: 'placeholder' };
23+
this.props.setEditorState(insertDataBlock(this.props.getEditorState(), imageData, 'image'));
24+
};
25+
26+
preventBubblingUp = event => {
27+
event.preventDefault();
28+
};
29+
30+
render() {
31+
const { theme } = this.props;
32+
return (
33+
<div className={theme.buttonWrapper} onMouseDown={this.preventBubblingUp} style={{ color: 'inherit' }}>
34+
<button className={theme.button} onClick={this.onClick} type="button">
35+
<svg width="24" height="24" viewBox="0 0 24 24">
36+
<path
37+
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"
38+
fill="currentColor"
39+
fillRule="evenodd"
40+
/>
41+
</svg>
42+
</button>
43+
44+
<div className={theme.addImage}>
45+
<input type="file" ref="fileInput" onChange={this.inputChange} style={{ display: 'none' }} />
46+
</div>
47+
</div>
48+
);
49+
}
50+
}

‎README.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
# draft-js-image-insert-demo
22

3-
43
```sh
4+
# 1. install and run demo page
55
yarn && yarn start
6-
open http://localhost:3000
6+
7+
# 2. run file upload/donwload sever locally
8+
docker run --rm -p 25478:25478 --name demoserver -v $HOME/tmp:/var/root mayth/simple-upload-server app -token token /var/root
9+
# > time="2019-11-26T16:25:31Z" level=info msg="starting up simple-upload-server"
10+
# > time="2019-11-26T16:25:31Z" level=info msg="start listening" ip=0.0.0.0 port=25478 root=/var/root token=f9403fc5f537b4ab332d upload_limit=5242880
11+
12+
# 3. upload test
13+
curl --form file=@`pwd`/demo1.gif 'http://localhost:25478/upload?token=token'
14+
# > {"ok":true,"path":"/files/demo1.gif"}
15+
16+
# 4. quit google chrome and re-run with cors-disabled
17+
open http://localhost:3000/ -a "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir
718
```
819

920
## demo
@@ -12,7 +23,6 @@ mutiple file
1223

1324
![img](./demo1.gif)
1425

15-
1626
resize
1727

1828
![img](./demo2.gif)

‎index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
position: relative;
1313
z-index: 1;
1414
}
15+
[style='color: inherit;'] button {
16+
background-color: red;
17+
}
1518
</style>
1619
</head>
1720
<body>

‎index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { EditorState, ContentState } from 'draft-js';
44
import Editor, { composeDecorators } from 'draft-js-plugins-editor';
55
import createImagePlugin from 'draft-js-image-plugin';
66
import createResizeablePlugin from 'draft-js-resizeable-plugin';
7-
import { AddImageButton } from 'draft-js-buttons-plugin';
8-
import { BlockquoteButton } from 'draft-js-buttons';
97
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
8+
import AddImageByURLButton from './AddImageByURLButton';
9+
import { AddImageButton } from 'draft-js-buttons-plugin';
1010
import 'draft-js-side-toolbar-plugin/lib/plugin.css';
1111

1212
const resizeablePlugin = createResizeablePlugin();
@@ -28,8 +28,8 @@ class ExampleEditor extends Component {
2828
<SideToolbar>
2929
{externalProps => (
3030
<div>
31+
<AddImageByURLButton {...externalProps} />
3132
<AddImageButton {...externalProps} />
32-
<BlockquoteButton {...externalProps} />
3333
</div>
3434
)}
3535
</SideToolbar>

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"devDependencies": {
88
"babel-core": "^6.7.6",
99
"babel-loader": "^6.2.4",
10+
"babel-polyfill": "^6.26.0",
1011
"babel-preset-es2015": "^6.6.0",
1112
"babel-preset-react": "^6.5.0",
1213
"babel-preset-stage-0": "^6.5.0",
@@ -17,6 +18,7 @@
1718
"webpack-dev-server": "2.11.5"
1819
},
1920
"dependencies": {
21+
"axios": "^0.19.0",
2022
"draft-js": "0.10.1",
2123
"draft-js-buttons-plugin": "^1.2.0",
2224
"draft-js-divider-plugin": "^0.2.1",

‎webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const HtmlWebpackPlugin = require('html-webpack-plugin');
22

33
module.exports = {
4-
entry: './index.js',
4+
entry: ['babel-polyfill', './index.js'],
55
devtool: 'inline-source-map',
66
output: { filename: 'bundle.js', publicPath: '' },
77
module: {

0 commit comments

Comments
 (0)