New May 5, 2026

How to preserve image filename in Quill JS when using base64 inline images?

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View How to preserve image filename in Quill JS when using base64 inline images? on stackoverflow.com

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',

},

} }); } }, []);

Scroll to top