Image src not being inserted into quill

[hedboc]

I've got this working right up until the point insertEmbed (quill-image-upload/src/image-upload.js) is called:

/** * Insert the image into the document at the current cursor position * @param {String} dataUrl The base64-encoded image URI */ insert(dataUrl) { const index = (this.quill.getSelection() || {}).index || this.quill.getLength(); this.quill.insertEmbed(index, 'image', dataUrl, 'user'); }

My image has uploaded and returned its url which is being passed to the above insert method (I've checked with the console). After this absolutely nothing happens. No image inserted into quill editor, no errors thrown, just nothing happens.

The response from my upload controller (Laravel 7) is a json formatted string of the image's url. No keys.

My js:

`
Quill.register("modules/imageUpload", ImageUpload);

const quill = new Quill('#quill-body', {
modules: {
toolbar: [
[{ 'header': 2 }, { 'header': 3 }],
['bold', 'italic'],
[{ 'script': 'sub'}, { 'script': 'super' }],
['link', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
[ 'link', 'image', 'video'],
[ 'clean' ]
],
imageUpload: {
url: 'http://mpba.local/image-upload', // server url. If the url is empty then the base64 returns
method: 'POST', // change query method, default 'POST'
name: 'file', // custom form name
withCredentials: false, // withCredentials
headers: { "X-CSRF-TOKEN": token.content }, // add custom headers, example { token: 'your-token'}
// csrf: { token: 'X-CSRF-TOKEN', hash: token.content }, // add custom CSRF
// customUploader: () => {}, // add custom uploader
// personalize successful callback and call next function to insert new url to the editor
// callbackOK: (serverResponse, next) => {
// next(serverResponse);
// },
// personalize failed callback
callbackKO: serverError => {
alert(serverError);
},
// optional
// add callback when a image have been chosen
// checkBeforeSend: (file, next) => {
// console.log(file);
// next(file); // go back to component and send to the server
// }
}
},
theme: 'snow'
});

var form = document.querySelector('.hl-editor-content');
form.onsubmit = function() {
// Populate hidden form on submit
var body = document.querySelector('input[name=body]');
var html = quill.root.innerHTML;
body.value = html;
};`

I've looked at the quill api docs and have spent hours trying to figure this out. Any ideas? I've tried it on latest Safari and Firefox.

[welldantas]

Hello,

The same happened to me, is that the insert is assigning the entire object where the image url should be.

I arranged like this:

Archive minified: image-upload.min.js
From:
this.quill.insertEmbed(i, "image", t, "user")
To:
this.quill.insertEmbed(i, "image", t.urlImage, "user")

Archive not minified: image-upload.js
From:

insert(dataUrl) {
		const index =
			(this.quill.getSelection() || {}).index || this.quill.getLength();
		this.quill.insertEmbed(index, 'image', dataUrl, 'user');
	}

To:

insert(dataUrl) {
		const index =
			(this.quill.getSelection() || {}).index || this.quill.getLength();
		this.quill.insertEmbed(index, 'image', dataUrl.urlImage, 'user');
	}

Return API upload

{"urlImage":"https://LINK-IMAGE.jpg"}