Rewrite the toolbar’s insert image button error: Failed to construct ImageData

[tinachi7]

Trying to implement the toolbar image handler to compress images with this package but I keep getting the error “Failed to construct ImageData:the provided value is not of type ImageDataSettings at reader.load”

also tried using the exact code from example sample from documentation but get same exact error. btw my console logged values match the console logs from the imageData values from the imageHandler for drop and paste, which are working fine.

const toolbarImageHandler = () => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();

    input.onchange = () => {
      const file = input.files ? input.files[0] : null;

      if (file) {
        const type = file.type;
        const name = file.name;
        const reader = new FileReader();
        console.log(reader);
        reader.onload = (e) => {
          // handle the inserted image
          const dataUrl = e.target.result;

          imageHandler(dataUrl, type, new ImageData(dataUrl, type, name));
          input.value = "";
        };
        reader.readAsDataURL(file);
      }
    };

};

[briangruber]

You have to use QuillImageDropAndPaste.ImageData instead of the builtin ImageData in the browser.

So, if you had above import QuillImageDropAndPaste from 'quill-image-drop-and-paste'

it should be

imageHandler(dataUrl, type, new QuillImageDropAndPaste.ImageData(dataUrl, type, name));