Paste image from clipboard to a variable

Ask us anything How do I?
1

I have an image element and when user hits CTRL + V , I need to paste the image in user’s clipboard to the variable thats binded to the src of image.

I am running the workflow using “On keydown” but cant figure out how to capture image data from clipboard and assign it to variable.

I tried js function like this

navigator.clipboard.readText()
  .then(text => {
    variables['a947901f-9002-4fd7-b3ba-142fc68c464f'] = text;
  });

it works for text , but no luck wit himages in clipboard

2

Update , this worked.
Pasting it for anyone who needs it

navigator.clipboard.read()
  .then(items => {
    for (const item of items) {
      if (item.types.includes('image/png') || item.types.includes('image/jpeg')) {
        item.getType(item.types[0])
          .then(blob => {
            const reader = new FileReader();
            reader.onload = () => {
              variables['a947901f-9002-4fd7-b3ba-142fc68c464f'] = reader.result;
            };
            reader.readAsDataURL(blob);
          });
      }
    }
  });
1 Like
3

Hi @dingan, I’m trying something similar but simpler, I just want the contents of the clipboard to be returned in a workflow for further manipulation. It’s just basic text.

I’ve tried navigator.clipboard.readText() and it’s not returning anything. I’ve also tried navigator.clipboard.read() and also nothing.

Note, I’m trying to avoid assigning to a variable, I just want the result returned in the workflow and picked up by a subsequent step.

Any ideas what I’m missing?