Hi @layerssss ,
I'm a member of cdnjs. We want to host this library.
I'd like to confirm that if https://www.npmjs.com/package/paste.js is officially maintained. If not, we will set git auto-update config and auto-updater in cdnjs will update automatically from git repo not NPM.
Thank you.

cdnjs/cdnjs#9156

Pasting text into a textarea in Edge (25.10586.0.0) inserts the clipboard (i) twice and (ii) at the beginning of the text no matter where the cursor is. Easily reproducible at http://micy.in/paste.js/.

Reviewable/Reviewable#267

It's been more than a year since the last release... Time to cut 0.0.22 perhaps?

Hi,
I have some question.
following is my situation:
I copy some plain text and paste plain text to textarea on your example web site (http://micy.in/paste.js/) .
but I found out that when I use Firfox(IE 10 also),I can't paste plain text to textarea.
It's only trigger pasteText Event and append result after textarea.(see pic 1)

*pic 1

But it's work on chrome.(see pic 2)

*pic 2

I trace the pastejs source code and found pastejs would change it's behaviour between chrome and other browser.(see pic 3)

*pic 3

I have tried to make all browser to behave as the same as possible, but after trial and error, I still could not make different browsers to work and behave the same.

Can you give me some advice?

In Firefox 43 on Linux, trying to paste either text or an image via ctrl+v results in the text area losing focus (and I believe the contentEditable area gaining focus, though it's hard to tell), and no pasteImage/pasteText event being fired. Also, any further key presses of v (without ctrl) behave as if ctrl+v was pressed.

Original issue: Reviewable/Reviewable#235

Browser compatibility doesn't include Edge.
Please tell me compatibility of Microsoft Edge.

I use pastableNonInputable element.

When I paste text, I can't paste it from second time. By this code, ev.currentTarget is not equal to ev.target. ev.currentTarget is the parent element but ev.target is the child span.

Do you know some workaround? Or do I mistook usage?

Hello

Is there a way to fake the paste event? I need to test my JavaScript code and don't know how to trigger the event.

Thank you.

hey how can I call paste.js to get the content of the clipboard from another function ?

I want to paste when the user clicks on a javascript button. thanks..

I was testing the demo in various browsers and got different results for where the image was pasted.

In the following browsers I clicked in the blank area below the 3rd div and the pasted image appeared below the 3rd div.

• Edge 38.14393.1066.0
• Firefox 54.0.1

In the following browsers I clicked below the 3rd div and the pasted image appeared above the 3rd div.

• Chrome 59.0.3071.115

For IE11 11.1480.14393.0 the image wouldn't past unless I clicked into one of the 3 divs on screen.

For all browsers, clicking inside one for the 3 sample divs, the image is pasted below the selected div.

I would image the different paste locations when clicking below the 3rd div is just a quirk in the demo, right?

I think you need to checkof typeof DataTransfer !== 'undefined' before checking if it has an items property.

现在想将复制的内容粘贴到div[contenteditable]，发现会出现两次同样的内容。
这个有什么好的解决思路？pasteText

The CTRL-V functionality in textarea is working for me for images. But I would like to add a new button that would do the same job: it means if user clicks on it, it would take the content of the clipboard and would send me the required data. Is it possible to do that?

Hello!
When using pastableNonInputable() method, the event pasteImage is called multiple times.
In fact, there is a strange behavior, it looks like pasteImage is fired so much times as binded element goes into DOM.

To ilustrate:
$('html').pastableNonInputable(); // pasteImage is fired 1 time
$('body').pastableNonInputable(); // pasteImage is fired 2 times
$('#some_element_inside_body').pastableNonInputable(); // pasteImage is fired 3 times

$"html").pastableNonInputable();
$('*').on("pasteImage", function (ev, data) {
	var postData = {};
	postData.blob = true;
	postData.url = data.dataURL;
	$.post("/libraries/file_uploader/temporary",
		postData
	, function (data) {

	}, "json");
});

Is this behavior intended?

Currently paste.js is an ideal solution for handling copy and paste programmatically of both text and bitmaps. Have you ever considered including also pasting of files? In some platforms (Windows, especially) a common way of copying files around is by pasting them (I'd venture it's as common as drag & drop on Mac).

I know you can read files with JavaScript ( https://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd ) but I'm not sure if the events that allow file reading. If they get enough information from "pasted files". While testing support for Safari I noticed in the demo scenarios pasting a file in contenteditable pastes the file icon (I didn't expect it to paste the contents, but in the other fields only the file name was pasted as text).

Have you considered adding file paste support (so it behaves similar to a file select input button)?

It doesn't work for me in Chrome 55.0.2883.87 m.

When pasting anything, I get every output 13x to console.log. The text "getrennte" was pasted once and output 13x:

Is this correct? What could be the problem?

As there is no other easy way of doing this (ticket can be closed):

I just wanted to say thank you for developing and maintaining this cool plugin. I will use it in a non profit project and it saves me lot of time as I am not javascript geek. So thanks very much for making this world a better place by sharing such great and helpfull code!!

Try copying an image to clipboard (do a google image search and copy an image to the clipboard), then using example page try and paste into the paste regions. Note that in Chrome it works perfectly, but in IE nothing happens. Also note that in last content editable example, the image flashes up for a second and then disappears.
Gary

I am using the pastableNonInputable bit. If I paste an image first, it works great. However, if I paste text (Which I do nothing with), then paste an image the image does not paste. Neither the pasteImageError or pasteImage events fire.

The on 'pasteImage' event never fires on M Edge.

Chrome supports the clipboard API completely and we should rather use this instead the old pasteArea hack, don't you think? (Chrome 33)

A user got this error while using paste.js 0.0.21 within Reviewable:

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
  at readAsDataURL(bower_components/paste.js/paste.js:273:25)
  at apply(bower_components/jquery/dist/jquery.js:4430:8)
  at apply(bower_components/jquery/dist/jquery.js:4116:27)
  at apply(bower_components/raven-js/dist/raven.js:384:28)

This is in Chrome 56.0.2924 on Mac OS X 10.12.2. I don't know what they were trying to paste -- presumably something that's not supported -- but it's probably worth it to stick a try/catch around this line just in case.

Thanks for this plugin, it works perfectly for me :)

I just have one question. I'm using the .pastableTextarea() on textarea and I'm using pasteImage and it works for me also in Opera. The image is loaded from the clipboard for me.

Using your example at http://micy.in/paste.js/ and also implemented it myself in a wysiwyg.

For chrome, its just fine, but FF and IE11 does not work in your demo nor in my case, when using the textarea.

I tried to debug it and it seems like the image is not "pasted" into the hidden div, but rather into the textarea itself, therefore https://github.com/layerssss/paste.js/blob/master/paste.js#L9 does not find the image and the event is not triggered

Could you assist me a bit fixing this? Thank you

i want to be able to paste to a big container div. the container is not editable itself, but has both editable and non editable sub elements.
i'm using the pastableContenteditable(). on chrome it works perfectly, but on firefox pasting images to this div only works if i add 'contenteditable' to the container div (which i don't want to add, since it modifies the container's look and behaviour).
example in the attached fiddle.
using pastableNonInputable() enables pasting perfectly on both browsers, but of course makes the inputables unusable because the focus is always applied back to the container.

https://jsfiddle.net/yaruok/r34rfgaj/

Hi,

Someone pointed out our plugins are similar (see https://github.com/vladmalik/pasteimage). Not too knowledgeable about the method you're using. I see it's basically the same or similar up to a point.

Mind taking a look at mine? It's pretty rudimentary and well annotated. Should I retire mine in favor of yours?

Thanks.

Vlad

On the example page and in my app, I can paste an image into the pastableNonInputable and pastableContenteditable but not pastableTextarea only in firefox. Pasting image in pastableTextarea works in Chrome

In v0.15, the pasteText event is delayed, which makes it impossible for my code to tell apart a blur on the textarea that's due to pasting (and activating the contentEditable container) vs due to the user actually focusing another element. This is important in my use case because blurring an empty textarea actually deletes it, so regaining focus later comes too late. I could delay my blur handler as well but this creates a race condition.

If the pasteText event needs to be delayed, could you fire an undelayed event first or otherwise indicate that the blur is temporary and focus will be regained shortly? Thanks.

一块文本域中使用paste.js处理粘贴上传，然后将图片插入文本域，但在firefox中会把框中所有前面插入的图片清掉，看源码应该是方法_checkImagesInContainer将图片删掉了，如下：
。

Hi
不好意思，自己心急粗心大意，上个问题是因为自己代码的影响
重新修改下问题咨询：
目前发现 Safari 上无法获取剪切板里的图片，请问这个是因为什么限制影响的呢？
非常感谢！

First of all thanks for great plugin

Nowadays a lot of project are Vue.js, React.js, Angular.js,...
so forcing people to include JQuery is not good idea

Its better to convert it to Pure JS

Hey there

Thanks a lot for this amazing little helper, we use it in our web app extensively.

We have an image upload field, which is simply a textarea now, and using paste.js, a pasted image is converted to base64, and the base64 string is sent to the app and there saved as a normal PNG file.

At the moment, we rely on users having a supporting browser (IE11, FF, Chrome). But we'd like to add a switch that displays a normal upload field, when the browser doesn't support pasting.

Is there an easy way to detect this? You have this matrix in the README; it would be great to have a little JavaScript helper method returning true/false depending on support status.

Best wishes.

... with value "paste.js".

It would help when using gulp-bower.

In the past I hadn't been able to use this because of Safari.

Today I was looking and saw several snippets where image paste works in Safari:
https://jsfiddle.net/SaschaKluth/togafu5s/1/
http://jsfiddle.net/KJW4E/754/

So I revisited this and found out that the table still doesn't list Safari but that it indeed supports it
in all three modes:

Perhaps you'd like to update the table? I tested with Safari Version 10.1 (12603.1.30.0.34). Haven't tried with versions older than Sierra's but I could confirm with El Capitan's later today.

你好！在rubyChina上看到你的帖子。貌似两年过去了clipboardData这个接口一点变化也没有TAT
_这个在windows系统上work嘛？_ clipboardData在自己mac上工作得挺好的，换到windows系统上复制图片后clipboardData.items.length为0。你是否遇到这类情况？

hi,chrome41can not work

Besides using paste.js for pasting images to textareas, I also use it to react on pasted strings that have a specific format.

E.g., when pasting a codepen url like https://codepen.io/jmuheim/pen/KmKOZO, I don't want to insert this exact string into the textarea, but a markdown link to it, like this: [CodePen.io](https://codepen.io/jmuheim/pen/KmKOZO).

For this, I need to prevent the original string being inserted into the textarea. How can this be achieved?

In Firefox v50+ the focus doesn't return to the textarea after text is pasted. From a comment by @mystor in Reviewable/Reviewable#360:

This bug appears to have been caused by Firefox implementing the DataTransferItemList specification. I believe that this error is on your side, due to user-agent sniffing.

From my testing, you can reproduce this error in chromium by spoofing the Firefox user agent, and can avoid the problem in Firefox nightly by spoofing the chrome user agent.

It seems like in the "paste" listener you sniff the user agent, and use that to decide what action to perform. If the Firefox user agent is detected, you then check for the presence of e.clipboardData.items. In versions of Firefox less than 50, e.clipboardData.items will not be present, but in Firefox 50, we now implement this interface. This is probably what is breaking in your code.

Looks like this bug was finally fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=846674#c50

I don't know for sure, but perhaps this will let you get rid of the hidden editable hack for Firefox?

Would it be possibly to have https://www.npmjs.com/package/paste.js updated?

It would make it easier for me if new releases where published to npm so I don't have to rely on a possible unstable git dependency.

If you have no control over the package, I'm sure npm support can set you up as the owner.

It can work on FF and Chrome,but no response on Safari 10.1.1 (12603.2.4).

I'm trying to paste images in FF 41.0.2, but it looks like it worked in FF 38. Have they done something to prevent this now?

Getting an image paste to work in all browsers without a Java applet is challenging to say the least.

@puremourning reports that 0.0.11 broke cmd+v text pasting in Safari. I'll integrate 0.0.13 later today to see if that fixes the issue, but thought I'd report it in the meantime.

Hello,

I have found out, that Safari supports pasted images.
The idea is, Safari reuses same way like you have for FireFox, but unlike FireFox you do not need to postpone image pasting. Pasted images are reported as plain base64 encoded pngs that can be read out + Safari reports the clipboardData.types "image/*****"
Here you can check the basic approach (paste image in Safari into ugly area, I did not make support of it in textarea)
https://fiddle.jshell.net/juwagn/gdar957u/embedded/result/

Hi,
what is correct way to unbind pasteImage event?
Thanks!

$('html').pastableNonInputable();

$('*').on('pasteImage', function (ev, data) {
	// code
});

Hello,

I'm running a file upload service (just for fun) and I've been using paste.js to allow users to CTRL+V images or text to the website. It'll then show "Pasted Image" and give an image preview or "Pasted Text". These can then be uploaded. Works perfectly - BUT:

To be able to paste the data no matter where the focus is on the website, I did

$('body').pastableNonInputable();
$('*').on('pasteImage', function(ev, data) {
    // not relevant
});

The problem is, that my website now has a broken text selection model. It took me quite long to figure this out, but it has something to do with pastableNonInputable() on the body. If I start selecting the text in a div for example, it works as expected only if I start selecting from the left or right side of the div (start selecting outside the div and then enter it). If I select text randomly inside the div it always deselects after releasing the mouse.

I want paste.js to do practically nothing except providing the paste data in a variable, no matter where the paste was initiated.

Am I doing something wrong or is this use case not supported?

Thanks in advance!

Edit1: See this small fiddle: https://jsfiddle.net/n43f4mor/4/
Edit2: Seems only to behave this way in Firefox, in IE11 and Edge I couldn't select at all, always drops.
Edit3: Dug a bit into the code, it's probably line 150 that causes this behaviour:

return paste._container.focus();

This line gets fired everywhere after clicking/selecting in the element the pastableNonInputable() was attached to.
It also happens on the first example at http://layerssss.github.io/paste.js/. The focus requesting also causes mobile browsers to show the keyboard, because the invisible input element created requests focus.