Inserting image url in quill only displays the image icon and not the image itself - file-upload

Question

I am using quill in Next.js and I have ran into a problem. Instead of using the default base64 encoding for images, I have added a custom handler that creates an object url for the images and I later pass it to the quill.insertEmbed() method. However, once I go to the browser, quill only displays an image icon like the one displayed by alt. I have tried to use the blotFormatter module but it still does not work. Honestly I do not know how blotFormatter works. Please help.
Here is my code
`import React, { useEffect, useState, useRef } from 'react';
import dynamic from 'next/dynamic';
import { useQuill } from 'react-quilljs';
// const BlotFormatter =
// typeof window === 'object'
// ? require('quill-blot-formatter')
// : () => false;
const BlotFormatter = dynamic(
() => {
import('quill-blot-formatter');
},
{ ssr: false, loading: () => <p>Text Editor Loading...</p> }
);
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['bold', 'italic', 'underline', 'strike'],
[{ indent: '-1' }, { indent: '+1' }, { align: [] }],
[{ color: [] }, { background: [] }],
[{ script: 'sub' }, { script: 'super' }],
[{ align: [] }],
['image', 'blockquote', 'code-block'],
['clean'],
];
const QuillEditor = () => {
const { quill, quillRef, Quill } = useQuill({
modules: {
toolbar: {
container: TOOLBAR_OPTIONS,
},
},
blotFormatter: {},
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
theme: 'snow',
placeholder: 'Describe your question',
});
const openInputImageRef = useRef();
if (Quill && !quill) {
Quill.register('modules/blotFormatter', BlotFormatter);
}
useEffect(() => {
if (quill) {
quill.getModule('toolbar').addHandler('image', imageHandler);
quill.getModule('blotFormatter');
}
}, [quill, Quill]);
const imageHandler = () => {
openInputImageRef.current.click();
};
// handle image insertions
const quillImageCallback = (e) => {
e.preventDefault();
e.stopPropagation();
if (
e.currentTarget &&
e.currentTarget.files &&
e.currentTarget.files.length > 0
) {
const file = e.currentTarget.files[0];
let formData = new FormData();
formData.append(file.name, file);
// create an objectUrl for the file
const url = URL.createObjectURL(file);
console.log(url);
// display the image on quill
quill.focus();
let range = quill.getSelection();
let position = range ? range.index : 0;
console.log('position....', position);
quill.insertEmbed(
position,
'image',
url,
Quill.sources.USER
);
quill.setSelection(position + 1);
}
};`
return (
<div>
<div ref={quillRef} />
<div>
<input
type="file"
accept="image/*"
ref={openInputImageRef}
onChange={(e) => quillImageCallback(e)}
className="hidden"
/>
</div>
</div>
);
};
export default QuillEditor;
I am currently working on a project that works like stack overflow. In the project people can ask questions which have titles, describe their questions including posting images and add tags for topical targeting. For the rich text editor, I chose Quill. Quill handles image uploads by converting images to base 64. I however, prefer to handle images as formData objects. I tried to handle image uploads independently so that I could store them separately in a file system. After searching throughout the internet, I found ways to use the imageHandler in next js. In my imageHandler, I create an objectUrl using the URL.createObjectUrl() method and then insertEmbed it to quill for display to the user. However, quill only displays an image icon. Registering the blotFormatter module does not also work. I also admit that I do not understand how blotFormatter works exactly. I have seen some code snippets where people use Class components but it does not seem to work for me. Please advise me on how to go about this problem.
Quill displays an image icon