Help imagehandler upgrading to 2.0

[ShadoViX]

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&lstrok;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&lstrok;y format pliku!<br>Mo&zdot;na umieszcza&cacute; zdj&eogon;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();
}

[luin]

Everything looks correct. Can you reproduce the issue in https://quilljs.com/playground/snow?

[ludejun]

You can use quill-react-commercial and it updated to quill@2.0.1.

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