Skip to main content
N
Niknab0417
Inspiring
January 7, 2018
Answered

Paste clipboard data to panel, not document

  • January 7, 2018
  • 1 reply
  • 1730 views

I've set up a function to handle pasting images from the clipboard to a canvas element inside my extension. It works fine on sites like jsfiddle or codepen, but Photoshop CC hijacks the event instead and content gets pasted to the active document as a new layer - the default behavior.

I assume I need to add some sort of if statement to prevent the default action if the panel has focus, but I don't know how to go about doing that. I'm not even sure what library/platform/thing I should be using for this. I have tabs open for CEP, ExtendScript, and CSXSLibrary, and I'm not sure which of these I need in this case.

Here's the main.js paste function:

pasteImage = function (e) {
            var items = e.originalEvent.clipboardData.items;
            // 1885434740 = charIDToTypeID( "past" ) = paste  
            e.preventDefault();
            e.stopPropagation();
            canvas.remove(introTxt);
            //Loop through files
            for (var i = 0; i < items.length; i++) {
                if (items.type.indexOf('image') == -1) {
                    var file = items,
                        //type = items.type,
                        imageData = file.getAsFile(),
                        URLobj = window.URL || window.webkitURL,
                        img = new Image();
                    img.src = URLobj.createObjectURL(imageData);
                    fabric.Image.fromURL(img.src, function (imgInst) {
                        imgInst.scaleToWidth(350);
                        canvas.add(imgInst).centerObject(imgInst);
                        imgInst.setCoords();
                        canvas.renderAll();
                    }, imgAttrs);
                }
            }
        }

As sort of a Hail Mary, I added this to my jsx file:

function stopPaste() {
    var doc = app.activeDocument;
    doc.paste(false);
}

and this event listener back in main.js:

function pasteListener() {
        if (canvas.is(':focus')) {
            csInterface.evalScript('stopPaste()');
        }
    }
    csInterface.addEventListener('PhotoshopCallback', pasteListener);
This topic has been closed for replies.
Correct answer Niknab0417

It turns out the Brackets extension builder plugin I used to start this project was using CEP 5. So, I was getting the "not a function" error message because registerKeyEventsInterest() wasn't in the CSInterface.js file I was using.

It started working after I updated the files (I can tell the pasteImage() function is being registered because the canvas.remove(introTxt); action is applied), but the content still isn't being pasted to the panel.

Edit (because I don't feel like making another comment):

Turns out the reason the function paste function wasn't working was because I removed an if-continue line from my code early on and forgot to put it back. The full paste function is this:

pasteImage = function (e) {
            var items = e.originalEvent.clipboardData.items;
            e.preventDefault();
            e.stopPropagation();
            canvas.remove(introTxt);
            //Loop through files
            for (var i = 0; i < items.length; i++) {
                if (items.type.indexOf('image') == -1) {
                    continue;
                }
                var file = items,
                    imageData = file.getAsFile(),
                    URLobj = window.URL || window.webkitURL,
                    img = new Image();
                img.src = URLobj.createObjectURL(imageData);
                fabric.Image.fromURL(img.src, function (imgInst) {
                    imgInst.scaleToWidth(350);
                    canvas.add(imgInst).centerObject(imgInst);
                    imgInst.setCoords();
                    canvas.renderAll();
                }, imgAttrs);
            }
        };
$(window).on('paste', pasteImage);

So, aside from an outdated plugin, most of the issues were user error. Well, that only took me 3 weeks to fix...

1 reply

N
Niknab0417Author
Inspiring
January 9, 2018

After more hunting around, I decided to try using the info in this post from last year, but I'm getting a "csInterface.registerKeyEventsInterest is not a function" error message, now.

var keyCodes = [
            {
                "keyCode": 56,
                "ctrlKey": true
                }
            ];
csInterface.registerKeyEventsInterest(JSON.stringify(keyCodes));
        $(window).keydown(function (e) {
            e.preventDefault();
            if (e.keyCode == 56 && e.ctrlKey) {
                pasteImage();
            }
        });
N
Niknab0417AuthorCorrect answer
Inspiring
January 15, 2018

It turns out the Brackets extension builder plugin I used to start this project was using CEP 5. So, I was getting the "not a function" error message because registerKeyEventsInterest() wasn't in the CSInterface.js file I was using.

It started working after I updated the files (I can tell the pasteImage() function is being registered because the canvas.remove(introTxt); action is applied), but the content still isn't being pasted to the panel.

Edit (because I don't feel like making another comment):

Turns out the reason the function paste function wasn't working was because I removed an if-continue line from my code early on and forgot to put it back. The full paste function is this:

pasteImage = function (e) {
            var items = e.originalEvent.clipboardData.items;
            e.preventDefault();
            e.stopPropagation();
            canvas.remove(introTxt);
            //Loop through files
            for (var i = 0; i < items.length; i++) {
                if (items.type.indexOf('image') == -1) {
                    continue;
                }
                var file = items,
                    imageData = file.getAsFile(),
                    URLobj = window.URL || window.webkitURL,
                    img = new Image();
                img.src = URLobj.createObjectURL(imageData);
                fabric.Image.fromURL(img.src, function (imgInst) {
                    imgInst.scaleToWidth(350);
                    canvas.add(imgInst).centerObject(imgInst);
                    imgInst.setCoords();
                    canvas.renderAll();
                }, imgAttrs);
            }
        };
$(window).on('paste', pasteImage);

So, aside from an outdated plugin, most of the issues were user error. Well, that only took me 3 weeks to fix...

    Trevor:
    Trevor:
    Legend
    January 16, 2018

    Congrats on finding and posting the solution.

    Adding the extra comment in this case would have been preferable as it let's the forums "followers" know you got it sorted out.

    (I was about to look into it now :-)

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices