How do you remove the event listener?

[HTMLGuyLLC]

I want to attach when a modal is opened and detach when it's closed.

[HTMLGuyLLC]

pasteImage.off('paste-image') does not work. I'm looking for essentially a way to destroy the plugin when the modal is closed (or simply detach the paste handler).

[HTMLGuyLLC]

I'm just going to attach it globally and put the conditional inside, but if you get a chance to respond, I'd love to redo this.

[Lenny4]

Comment (l:160):
/document.addEventListener("click", function () {
e._pasteCatcherFocus()
})/
And (l164):
/, this._pasteCatcher.focus()/

[Lenny4]

@HTMLGuyLLC

[HTMLGuyLLC]

I'm not sure what you mean by your comment, can you provide more context? My goal is to be able to instantiate the plugin when my modal opens, and then destroy it when it closes. I do not want the paste listener to be an active event listener all the time, but that's the way I had to make it work for now. It has nothing to do with focus.

[Lenny4]

Sorry I misunderstood your request. Well here is how I do for textarea:

pasteImage.on('paste-image', function (image) {
    $(document).find('textarea').each(function () {
        if ($(this).is(":focus")) {
            console.log(image);
        }
    });
});

The event is always call when Crtl+V is press with an image in clipboard and then you check if the focus is on the textarea.
In your case if you are using bootstrap 4 and jQuery for display modal, you can use this event:

$( "#id-modal" ).on('shown', function(){
    $(this).focus()
});

And then:

pasteImage.on('paste-image', function (image) {
    if ($(document).find('#id-modal, #id-modal *').is(":focus")) {
        console.log(image);
        //your code
    }
});

And when you close the modal, remove the focus:

$('#id-modal').on('hidden.bs.modal', function () {
    $("#id-modal").blur(); 
})

[HTMLGuyLLC]

I am already making sure the modal is open and everything. It's working fine. I just don't like that it's catching the paste event all the time (even when I don't need to).

[Lenny4]

Well I think you cannot configure the script. The author need to update the code, but I think he doesn't work on this project anymore (last commit 3 years ago).

[HTMLGuyLLC]

I noticed that it was old. I was hoping someone would comment with the method of modifying the script to get the result I want. It wouldn't be hard to fork his repo and make the changes, but I tried a few things and couldn't get it working. Instead of investing a lot of time on it, I moved on, but it would still be nice if someone came up with the solution at some point in the future so I can improve my application.

[fandrupaw]

I had same problem and finally I fixed it with more native solution

document.onPaste = e => {
  const { items } = e.clipboardData;

  // if you copy image from website, then usually clipboardData contains several items, 
  // so we need to iterate through them and find image
  for (let i = 0; i < items.length; i++) {
    const item = items[i];

    if (item.type.indexOf('image') === 0) {
      const blob = item.getAsFile();

      const reader = new FileReader();

      reader.onload = e => {
        // add some fake info like file name, file type
        const pastedFile = new File([blob], 'pasted-image.png', { type: 'image/png' });
        const image = e.target.result;

        ...
      };

      reader.readAsDataURL(blob);

      break;
    }
  }
};

you can easly add/remove event binding