Proper way to use react-quil to store images embedded in text

Question

I am using react-quill 1.3.3. I also allow for the addition of images into the posts. The way that quill works right now, is that it just converts the image to a string and sends it all as text. The problem is that this seems to take a lot of extra memory (data). For instance, I am getting 413 errors, "413 (Payload Too Large)", for images that are only 20K, etc. The real way to do this is to convert your images into links and save the images to a cloud service. I already have the cloud service working for saving avatar images, so that can just be copied. The problem is, how do we get react-quill to do this? Quill seems like a one stop shop that just converts your images to text, so we are going to have to do some special coding and I have no idea how to do that.

Here is the quill component:

import React from 'react'

export default class PostEditor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { editorHtml: '', theme: 'snow' }
    this.handleChange = this.handleChange.bind(this)
    if (typeof window !== 'undefined') {
      this.ReactQuill = require('react-quill');
      require('katex');
      require('react-quill/dist/quill.snow.css');
    }
  }

  handleChange (value) {
    this.props.onChange(value);
  }

  render() {
    const ReactQuill = this.ReactQuill
    const { value } = this.props;
    
    if (typeof window !== 'undefined' && ReactQuill) {
      return (
        <ReactQuill
          onChange={this.handleChange}
          theme="snow"
          value={value}
          modules={PostEditor.modules}
        />
      )
    } else {
      return <textarea />;
    }
  }
}

PostEditor.modules = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{size: []}],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, 
     {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image', 'video','formula'],
    ['clean']
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  }
}

PostEditor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'video', 'formula'
]

// PostEditor.propTypes = {
//   placeholder: PropTypes.string,
// }

Here is some work done to do something similar, but I have no idea how to add this code to my app.

What I am expecting is that we should be able to use the "add image" button on the quill toolbar and the wysiwyg works fine and the image is taken from the user's hard drive and placed in the text properly formated. The difference is that when you save, the image is sent to your cloud storage and a link is pasted into the saved html. When you view the post, that link is expanded into an image again.

If anyone knows why the images are being converted into such large sizes (more than 20MB) please let me know because I might also just accept that as a solution.

Here is the code for the part of the component that contains the quill:

 {this.isActiveField('postText') && (
          <Fieldset className="mt2">
            <PostEditor
              id="postText"
              onChange={this.onChange}
              value={postText}
            />
            <Snackbar
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              open={!!ErrorHandling.getFieldErrors(errors, 'postText')}
              autoHideDuration={4000}
              onClose={this.handleClose}
              ContentProps={{
                'aria-describedby': 'message-id',
              }}
              message={<span id="message-id">{ErrorHandling.getFieldErrors(errors, 'postText')}</span>}
              action={[
                <IconButton
                  key="close"
                  aria-label="Close"
                  color="inherit"
                  className={classes.close}
                  onClick={this.handleClose}
                >
                  <CloseIcon />
                </IconButton>,
              ]}
            />
          </Fieldset>
        )}

Edit: I worked out the second solution. In my Apollo server code I added the bodyParser as recommended here. It seems to work fine now.

Proper way to use react-quil to store images embedded in text

0 Answers0