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

``bash
npm install quill-upload --save
`

Start

`js
const Quill = require("quill");
const ImageKit = require("imagekit");
require("quill/dist/quill.snow.css");
const {
ImageHandler,
VideoHandler,
AttachmentHandler,
} = require("quill-upload");

// Register modules
Quill.register("modules/imageHandler", ImageHandler);
Quill.register("modules/videoHandler", VideoHandler);
Quill.register("modules/attachmentHandler", AttachmentHandler);

// Configure Block for Quill
var Block = Quill.import("blots/block");
Block.tagName = "DIV";
Quill.register(Block, true);

var imagekit = new ImageKit({
privateKey: "private_JGEF7P/FLHhcDwAgcHkk6gwN4ls=",
publicKey: "public_J+oJUIpERZKorlTJdJs/8uhugl4=",
urlEndpoint: "https://ik.imagekit.io/jq3pmfklv",
authenticationEndpoint: "http://localhost:3000/auth",
});

// Upload handler function
const _onUpload = async function (file, resolve) {
try {
imagekit.upload(
{
file: file,
fileName: "abc1.jpg",
tags: ["tag1"],
},
function (err, result) {
console.log("upload success", result.url);

resolve(result.url);
}
);
} catch (error) {
console.error("Upload error:", error);
resolve("https://via.placeholder.com/300?text=Upload+Failed");
}
};

// Initialize Quill
document.addEventListener("DOMContentLoaded", () => {
const quill = new Quill("#editor", {
theme: "snow",
modules: {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline"],
["image", "video", "attachment"],
],
imageHandler: {
imageClass: "custom-image-class",
// Optional: Configure placeholder images
placeholderImageUploading: "/assets/uploading-placeholder.png", // Default: inline SVG
placeholderImageError: "/assets/error-placeholder.png", // Default: inline SVG
upload: (file) => {
return new Promise((resolve) => {
if (file.size > 10 1024 1024) {
console.warn("File too large:", file.name);
resolve("https://via.placeholder.com/300?text=File+Too+Large");
return;
}
_onUpload(file, resolve);
});
},
},
videoHandler: {
upload: (file) => {
return new Promise((resolve) => {
if (file.size > 50 1024 1024) {
console.warn("File too large:", file.name);
resolve("https://via.placeholder.com/300?text=File+Too+Large");
return;
}
_onUpload(file, resolve);
});
},
},
attachmentHandler: {
upload: (file) => {
return new Promise((resolve) => {
if (file.size > 20 1024 1024) {
console.warn("File too large:", file.name);
resolve("https://via.placeholder.com/300?text=File+Too+Large");
return;
}
_onUpload(file, resolve);
});
},
},
},
});

// Add output button handler
document.getElementById("output")?.addEventListener("click", () => {
console.log(quill.root.innerHTML);
});
});

`

Configuration Options

$3

You can customize the placeholder images shown during upload and on error:

`js
{
placeholderImageUploading: "/assets/uploading-placeholder.png", // Image shown while uploading
placeholderImageError: "/assets/error-placeholder.png", // Image shown on upload error
imageClass: "custom-image-class", // Custom CSS class for images
upload: (file) => { / ... / }
}
`

Default values: If not specified, the module uses inline SVG placeholders that work out of the box:
- placeholderImageUploading: Gray box with "Uploading..." text
- placeholderImageError: Red box with "Upload Failed" text

Note: The old https://via.placeholder.com/ service no longer works, so custom placeholders or the provided defaults are recommended.

$3


- imageClass (string, optional): Custom CSS class to apply to uploaded images
- placeholderImageUploading (string, optional): URL or data URI for the uploading placeholder
- placeholderImageError (string, optional): URL or data URI for the error placeholder
- upload (function, required): Function that returns a Promise resolving to the uploaded file URL

$3

- placeholderImageUploading (string, optional): URL or data URI for the uploading placeholder
- placeholderImageError (string, optional): URL or data URI for the error placeholder
- upload (function, required): Function that returns a Promise resolving to the uploaded file URL

$3

- placeholderImageUploading (string, optional): URL or data URI for the uploading placeholder
- placeholderImageError (string, optional): URL or data URI for the error placeholder
- upload (function, required): Function that returns a Promise resolving to the uploaded file URL

Example

`bash
cd example
npm install
npm start
``