Implementing Image Upload in React Quill

Adding image upload functionality is a common requirement for rich text editors, especially when building content creation tools. React Quill, a popular React wrapper for QuillJS, does not natively support image uploads. However, you can implement this feature by customizing its modules and handlers.

In this article, we’ll explore how to add image upload capabilities to React Quill, allowing users to upload images directly into the editor.

---

Setting Up React Quill

Before implementing image upload, ensure React Quill is installed and configured:

npm install react-quill

Import and set up a basic React Quill editor:

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const Editor = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} />
  );
};

export default Editor;

---

Adding an Image Upload Handler

To enable image uploads, we need to customize the Quill toolbar and configure an image handler.

Step 1: Customize the Toolbar

Add an image button to the toolbar:

const modules = {
  toolbar: [
    ['bold', 'italic', 'underline'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image'],
  ],
};

Step 2: Create a Custom Image Handler

The image handler allows users to upload an image file and insert it into the editor. Here’s how to implement it:

const handleImageUpload = () => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

  input.addEventListener('change', async () => {
    const file = input.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);

      // Replace with your API endpoint
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      const data = await response.json();
      const imageUrl = data.url;

      const quill = this.quill;
      const range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', imageUrl);
    }
  });

  input.click();
};

Step 3: Register the Handler

Pass the handler to the modules configuration:

const modules = {
  toolbar: {
    container: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
    ],
    handlers: {
      image: handleImageUpload,
    },
  },
};

const EditorWithImageUpload = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
  );
};

export default EditorWithImageUpload;

---

Backend Setup for Image Uploads

Your backend must handle file uploads and return a URL for the uploaded image. Here’s an example using Node.js and Express:

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  const imageUrl = `/uploads/${file.filename}`; // Replace with your storage logic
  res.json({ url: imageUrl });
});

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.listen(3000, () => console.log('Server running on port 3000'));

---

Styling Uploaded Images

You can use CSS to style images in the editor. For example:

.ql-editor img {
  max-width: 100%;
  height: auto;
}

---

Conclusion

Adding image upload functionality to React Quill enhances its usability for creating rich content. By customizing the toolbar and implementing a custom image handler, you can allow users to upload and embed images seamlessly. Pair this with a robust backend to handle file uploads, and you’ll have a fully functional solution for your application.

---

References

1. React Quill Documentation
2. QuillJS Documentation
3. Multer Documentation
4. React Quill Tutorial