How to upload an image to Quill rich text editor via quil-image-uploader module

Question

I have encountered an issue while trying to upload an image to quil-react via q uil-image-uploader . For some reason if you use the editor with a controlled react component and update the value via onChange function of react-quill, something brakes.

From console.logs I figured that the image gets stuck on base64 representation and then does not reach the next step of being deleted, and re-inserted as an img tag.

Here is a forked version of code sandbox

If you try to upload the image it will not work.

Thanks so much for your help, If I am totally missing something obvious please point this poor soul towards it: haha :)

Answer 1

You are placing a div inside ReactQuill which is causing problem. Do it like this:

    render() {
    return (
      <div>
        <ReactQuill
          theme="snow"
          modules={this.modules}
          formats={this.formats}
          value={this.state.text}
          onChange={(content) => {
            this.setState({ text: content });
            console.log(content);
          }}
        />
      </div>
    );
  }