I am using Quill JS (React) to compose emails. When I upload an image, Quill converts it into a base64 string inside the <img src='base64datas....'> tag. However, I need the original filename on my backend (Python) to set the attachment name correctly. Currently, I only get the base64 data and the filename is lost.
Is there a way to intercept the image upload and store the filename as a data-attribute (like data-filename) or any other way to send the filename along with the HTML body?
Code:
useEffect(() => {
if (editorRef.current && !quillInstance.current) {
quillInstance.current = new Quill(editorRef.current, {
placeholder: 'Type your message here...',
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'align': [] }],
['link', 'image'],
['clean'],
["table-better"],
],
table: false,
"table-better": {
language: "en_US",
bounds:document.body,
menus: [
"column",
"row",
"merge",
"table",
"cell",
"wrap",
"copy",
"delete",
],
toolbarTable: true,
},
imageResizer: {
modules: ['Resize', 'DisplaySize', 'Toolbar'],
},
toggleFullscreen: {
buttonTitle: 'Toggle fullscreen',
},
}
});
}
}, []);