Want to show me some ❤️ for the hard work I do on this library? You can use the following PayPal link: https://paypal.me/nvtit93. Any amount is welcome and let me tell you it feels good to be appreciated. Even a dollar makes me super excited about all of this.

quill-upload

A plugin for uploading image, video, attachment in Quill 🌇

• 🌟 upload a image, video, attachment when it is inserted, and then replace the base64-url with a http-url
• 🌟 preview the image, video, attachment which is uploading with a loading animation
• 🌟 when the image, video, attachment is uploading, we can keep editing the content including changing the image's, video's or attachment's position or even delete the image, video or attachment.

Install

1npm install quill-upload --save

Start

1const Quill = require("quill");
2const ImageKit = require("imagekit");
3require("quill/dist/quill.snow.css");
4const {
5  ImageHandler,
6  VideoHandler,
7  AttachmentHandler,
8} = require("quill-upload");
9
10// Register modules
11Quill.register("modules/imageHandler", ImageHandler);
12Quill.register("modules/videoHandler", VideoHandler);
13Quill.register("modules/attachmentHandler", AttachmentHandler);
14
15// Configure Block for Quill
16var Block = Quill.import("blots/block");
17Block.tagName = "DIV";
18Quill.register(Block, true);
19
20var imagekit = new ImageKit({
21  privateKey: "private_JGEF7P/FLHhcDwAgcHkk6gwN4ls=",
22  publicKey: "public_J+oJUIpERZKorlTJdJs/8uhugl4=",
23  urlEndpoint: "https://ik.imagekit.io/jq3pmfklv",
24  authenticationEndpoint: "http://localhost:3000/auth",
25});
26
27// Upload handler function
28const _onUpload = async function (file, resolve) {
29  try {
30    imagekit.upload(
31      {
32        file: file,
33        fileName: "abc1.jpg",
34        tags: ["tag1"],
35      },
36      function (err, result) {
37        console.log("upload success", result.url);
38
39        resolve(result.url);
40      }
41    );
42  } catch (error) {
43    console.error("Upload error:", error);
44    resolve("https://via.placeholder.com/300?text=Upload+Failed");
45  }
46};
47
48// Initialize Quill
49document.addEventListener("DOMContentLoaded", () => {
50  const quill = new Quill("#editor", {
51    theme: "snow",
52    modules: {
53      toolbar: [
54        [{ header: [1, 2, false] }],
55        ["bold", "italic", "underline"],
56        ["image", "video", "attachment"],
57      ],
58      imageHandler: {
59        imageClass: "custom-image-class",
60        upload: (file) => {
61          return new Promise((resolve) => {
62            if (file.size > 10 * 1024 * 1024) {
63              console.warn("File too large:", file.name);
64              resolve("https://via.placeholder.com/300?text=File+Too+Large");
65              return;
66            }
67            _onUpload(file, resolve);
68          });
69        },
70      },
71      videoHandler: {
72        upload: (file) => {
73          return new Promise((resolve) => {
74            if (file.size > 50 * 1024 * 1024) {
75              console.warn("File too large:", file.name);
76              resolve("https://via.placeholder.com/300?text=File+Too+Large");
77              return;
78            }
79            _onUpload(file, resolve);
80          });
81        },
82      },
83      attachmentHandler: {
84        upload: (file) => {
85          return new Promise((resolve) => {
86            if (file.size > 20 * 1024 * 1024) {
87              console.warn("File too large:", file.name);
88              resolve("https://via.placeholder.com/300?text=File+Too+Large");
89              return;
90            }
91            _onUpload(file, resolve);
92          });
93        },
94      },
95    },
96  });
97
98  // Add output button handler
99  document.getElementById("output")?.addEventListener("click", () => {
100    console.log(quill.root.innerHTML);
101  });
102});
103

Example

1cd example
2npm install
3npm start