quill
quill copied to clipboard
Help imagehandler upgrading to 2.0
Hello. Could someone tell me where my mistake is? Everything worked in Quill 1.3.7, now I want to switch to Quill 2.0 and unfortunately it does not add the image.
function imagehandler() {
let fileInput = this.container.querySelector('input.ql-image[type=file]');
if (fileInput == null) {
fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', 'image/jpg, image/jpeg');
fileInput.classList.add('ql-image');
fileInput.addEventListener('change', () => {
const files = fileInput.files;
const range = this.quill.getSelection(true);
if (!files || !files.length) {
return;
}
const formData = new FormData();
formData.append('image', files[0]);
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timerProgressBar: false,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
html: '<img src="assets/images/ajax-loader.gif"> Przesyłanie pliku...'
})
$.ajax({
url: "uploadimage.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data) {
data = JSON.parse(data);
if (data.error == 'B1') {
show_info_message("Nie wybrano pliku!", "1500", "error", "", "");
} else if (data.error == 'B2') {
show_info_message("Zły format pliku!<br>Można umieszczać zdjęcia tylko w formacie JPG i JPEG!", "2000", "error", "", "");
} else if (data.error == 'B3') {
show_info_message("Pliku obrazu nie zapisano!", "1500", "error", "", "");
} else {
show_info_message("Obraz zostal dodany", "1500", "success", "", "");
let range = quill.getSelection(true);
var Delta = Quill.import('delta');
quill.updateContents(
new Delta()
.retain(range.index)
.delete(range.length)
.insert({
image: data.url
},
{
link: data.link,
alt: data.alt
}), Quill.sources.USER);
}},
error: function(e) {
}
});
quill.insertText(range.index + 1, "");
fileInput.value = '';
});
this.container.appendChild(fileInput);
}
fileInput.click();
}
Everything looks correct. Can you reproduce the issue in https://quilljs.com/playground/snow?
You can use quill-react-commercial and it updated to [email protected].
Or use the source code in: https://github.com/ludejun/quill-react-commercial/blob/master/modules/imagePasteDrop.js https://github.com/ludejun/quill-react-commercial/blob/master/modules/toolbar/image.js