How to add image from computer in Quill JS?

Question

It is possible to add a image into quill JS editor from a url but can't find a way to add an image from computer like all the traditional rich text editors do.

Is there any way that serves this purpose?

Answer 1

You can do the following:

quill.getModule("toolbar").addHandler("image", () => {
        this.selectLocalImage();
    });

function selectLocalImage() {
    var input = document.createElement("input");
    input.setAttribute("type", "file");
    input.click();
    // Listen upload local image and save to server
    input.onchange = () => {
        const file = input.files[0];
        // file type is only image.
        if (/^image\//.test(file.type)) {
            this.saveToServer(file, "image");
        } else {
            console.warn("Only images can be uploaded here.");
        }
    };
}

function saveToServer(file) {
    // Upload file to server and get the uploaded file url in response then call insertToEditor(url) after getting the url from server
}

function insertToEditor(url) {
    // push image url to editor.
    const range = quill.getSelection();
    quill.insertEmbed(range.index, "image", url);
}