Getting bad request when trying to add an image

[nusry]

I’m creating a plugin, and I need to add an image to the Penpot UI.

For this, I use

penpot
      .uploadMediaData("noise-data", message.data, "image/jpeg")
      .then(() => {
        console.log("done");
      })
      .catch((e) => {
        console.log(e);
      });

Here the message.data is a Uint8Array. But I’m getting a bad request. What am I doing wrong.
Any help is appreciated. Thanks.

[lplath]

Any news on this?
I’ve been trying everything but I’m always getting this:

[
    "^ ",
    "~:type",
    "~:validation",
    "~:code",
    "~:invalid-image",
    "~:hint",
    "invalid image"
]

[nusry]

Nope. I’ve abandoned 2 plugins because of this

Also, check this: Getting a bad request for `uploadMediaData` · Issue #176 · penpot/penpot-plugins · GitHub

I tried to use other packages to convert as well. Nothing worked. Always getting the same error.
Seems like only simple images work.

Packages I used:

html2canvas

html-to-image

dom-to-svg-v2

[lplath]

I actually figured it out.

You have to create a Blob and use that as the data array.

$.canvas.toBlob(async (blob) => {
      if (blob) {
        const buffer = await blob.arrayBuffer();
        sendMessage({ type: "createImage", content: new Uint8Array(buffer) });
      }
});

If you are using the ImageData from a canvas the mimetype should also be “image/png”.

const image = await penpot.uploadMediaData("image", message.content, "image/png");
const rect = penpot.createRectangle();
rect.fills = [{ fillOpacity: 1, fillImage: image }]

[nusry]

Wow. Thank you! that actually worked.