react-quill-image-uploader

a plugin for react-quill which can upload multi image and remember the image url histroy

• click or drag an image into "click or drag" area, then plugin will call uploadCallback and wait for the promise
• plugin will remember the image url which is saved
• click the image preview, the plugin will insert the image(width=100%) into the editor
• drag the toolbar of the plugin and move where you want

online demo

demo

how to install

1npm i react-quill-image-uploader
2// yarn add react-quill-image-uploader

how to use

1import ReactQuill from 'react-quill'
2import 'react-quill/dist/quill.snow.css'
3import ReactQuillImageUploader, {
4  saveImageSrc,
5} from 'react-quill-image-uploader'
6
7class App extends React.Component {
8  modules = {
9    toolbar: {
10      container: [['bold', 'italic', 'underline', 'strike'], ['image']],
11      handlers: {
12        image: () => {
13          const { clientX, y: clientY } = window.event
14          const position = { x: clientX, y: clientY } // position the plugin to show
15          this.ReactQuillImageUploaderRef.toggle(position) // show or hide the plugin
16          // toggle() is also ok
17          // this.ReactQuillImageUploaderRef.toggle()
18        },
19      },
20    },
21  }
22  componentDidMount() {
23    this.quill = this.quillRef.getEditor()
24    this.setState({ quill: this.quill })
25
26    // add new one to history
27    // from version 0.0.1
28    // ReactQuillImageUploader.saveImageSrc("https://iph.href.lu/100x100")
29    // from version 0.0.4
30    ReactQuillImageUploader.saveImage({
31      name: 'demo.jpg',
32      src: 'https://iph.href.lu/100x100',
33    })
34
35    // remove all and add new one by the history api
36
37    // es6
38    // import {setHistory} from 'react-quill-image-uploader'
39    // setHistory([{
40    //   name: "demo.jpg",
41    //   src: "https://iph.href.lu/100x100"
42    // }])
43
44    // es5
45    // ReactQuillImageUploader.setHistory([{
46    //   name: "demo.jpg",
47    //   src: "https://iph.href.lu/100x100"
48    // }])
49  }
50
51  uploadImageCallBack = (file, base64) => {
52    // check file.size
53    // check file type by file.name
54
55    return new Promise((resolve, reject) => {
56      // submit file to server
57      let src = 'https://iph.href.lu/200x200' // demo image src
58      if (base64) {
59        src = base64
60      }
61      // upload img thing
62      const uploadSuccess = false
63      if (uploadSuccess) {
64        // insert img into editor manually
65        this.ReactQuillImageUploaderRef.insertImg(src)
66
67        // return data to save to plugin history
68        resolve({
69          data: {
70            name: file.name || '',
71            link: src,
72          },
73        })
74      } else if (!uploadSuccess) {
75        // return resolve({status: 'fail'}) or reject(), plugin will warn the user to upload again, will not save in history
76        // resolve({
77        //   status: 'fail',
78        // })
79        // resolve()
80        // or
81        setTimeout(() => {
82          return reject()
83        }, 3 * 1000)
84      } else {
85        // return nothing, meaning that do not save anything to history or upload fail panel
86        resolve()
87      }
88    })
89  }
90  render() {
91    const { modules, className = '', placeholder = 'write here..' } = this.props
92    const { quill = {} } = this.state
93    return (
94      <div>
95        <ReactQuill
96          ref={el => {
97            this.quillRef = el
98          }}
99          placeholder={placeholder}
100          modules={modules || this.modules}
101          className={className}
102        />
103        <ReactQuillImageUploader
104          ref={el => {
105            this.ReactQuillImageUploaderRef = el
106          }}
107          isShowUploadFail={true} // default true, uopload fail history is hidden when false
108          isShowHistory={true} // default true, history is hidden when false
109          quill={this.state.quill}
110          uploadCallback={uploadImageCallBack}
111        />
112      </div>
113    )
114  }
115}

api

• insertImg(imgSrc, width = "100%", source = "user") // insert img into editor at last editor selection index. quill more info
• saveImage({name,src}) // save name and src into localStorage
• saveImageSrc(src) // save src into localStorage
• (>=0.1.0) toggle({x=0,y=0,title=''}) // show or hide at browser somewhere, default is {title='', x = window.event.x, y = window.event.y}
• uploadCallback // return promise {data: {name,link}}
• (>=0.1.0) getHistory // return array [{name,src}]
• (>=0.1.0) setHistory // return boolean, return true if operation is success
• (>=0.1.0) removeHistory // return boolean, return true if operation is success

history

• 20190719,v0.1.1
  • fix uploadCallback return nothing
  • uploadCallback support return reject() as well as resolve({status: 'fail'})
  • allow simultaneous uploads
  • show uploading files count when uploading
  • add history api args check for safe
  • add localstorage value check for safe
• 20190718,v0.1.0
  • fix editor selection bug (sorry guys)
  • support custom title for plugin by using api .toggle({title})
  • api .toggle() can be without any param now, default is {title='', x = window.event.x, y = window.event.y}
  • add upload failed status, add some history api detail
  • uploadCallback return nothing is ok now, which mean that I do not want to save anything to the history
  • this plugin can handle input other kind of file since (0.1.0) uploadCallback can return nothing, like audio and video
  • add isShowUploadFail flag to show or hide the upload fail panel
  • add isShowHistory flag to show or hide the upload history panel
• 20190612,v0.0.6 support to insert image by base64, modify image preview ui.
• 20190612,v0.0.5 fix bug for public method saveImage, add public method insertImg for inserting img by hand。
• 20190611,v0.0.4 add new upload type, upload by insert image src。
• 20190611,v0.0.3 update to new UI, insert image without focus on editor。