Problem using this plugin with "quill-image-uploader"

[benwinding]

Seems to be an issue using the plugin with https://github.com/NoelOConnell/quill-image-uploader

Possibly a conflict with the configurations of each plugin.

[CallumCM]

I've had the same problem, when I use both plugins rather than uploading the image it just compresses the image and outputs base64. Thanks!

[CallumCM]

My solution was to replace the insertIntoEditor function in quill-image-compress with a custom image uploader, which I'll admit is a bit crude, but it works!

function b64toBlob(dataURI, type='image/webp') {
  const byteString = atob(dataURI.split(',')[1]);
  const ab = new ArrayBuffer(byteString.length);
  let ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: 'image/webp' });
}

// Replace imageCompressor's script to just insert the base64 with a script to upload the image
imageCompressor.prototype.insertToEditor = (url) => {

  // data:image/png;base64,... is the beginning of the string, and is 22 characters long
  let file = b64toBlob(url.slice(22), url.slice(5).split(';')[0]);

  const formData = new FormData();
  formData.append("file", file);

  fetch("/upload", {method: "POST", body: formData})
    .then(response => response.text())
    .then(result => {
      const range = editor.getSelection();
      editor.insertEmbed(range.index, "image", `${result}`, "user");
    })
    .catch(error => {
      console.error("Error:", error);
    });
};

[benwinding]

@Turnip1234 nice work on finding a solution! 💯 Will happily merge a PR if you wanna make one for this change 👌

[CallumCM]

Absolutely!

[benwinding]

Fixed by PR #36