Is copy text functionality (using plain javascript) not supported inside meteor.call callback


#1

Hello Guys,
I am currently using plain javascript code inside meteor.call callback to copy text, but got no success.
Here is my code sample-

var field = document.getElementById('someId');
field.focus();
field.setSelectionRange(0, field.value.length);
var success = document.execCommand("copy");
console.log("Copy success >>>>>>>", success)

It always console false.

So I have query, Is copy text functionality not supported inside meteor.call callback ?
If it is supported, Please help me for this issue ?

Thanks.


#2

That should work (Meteor does not prevent its use).

Have you checked that your browser supports it?

console.log(document.queryCommandSupported('copy'));

#3

Hi @robfallows,
Thanks for your response. I have checked it. It prints true on console.
Please advice.
Thanks.


#4

I’ve confirmed this works as expected, so I suspect the issue is with your code - specifically where you are running this, as the DOM may not be ready.

Can you share more code please?


#5

Hi @robfallows,
Here is the code sample which i have used -

Meteor.call('copyToclipboard', data, (err,res)=>{
	if(err){
		Bert.alert( err, 'danger', 'growl-top-right');
	}else{
		if(res){
			$('#inviteLink').val(res);
			if(res == ""){
				Bert.alert('Error while copy link', 'danger', 'growl-top-right');
			}else{
				console.log(document.queryCommandSupported('copy'));
				var field = document.getElementById('inviteLink');
				console.log("Invitation url >>>", field.value, "---- field.value.length ----", field.value.length)
				field.focus();
				field.setSelectionRange(0, field.value.length);
				var success = document.execCommand("copy");
				// window.prompt("Copy to clipboard: Ctrl+C, Enter", res);
				console.log("Copy success >>>>>>>", success)
				if(success){
					Bert.alert('link copied to clipboard', 'info', 'growl-top-right');
				}else{
					Bert.alert('Copy not supported or blocked', 'danger', 'growl-top-right');
				}
			}
		}else if(res == false){
			Bert.alert('Email ID already exists', 'danger', 'growl-top-right');
		}
	}
});

Please advice.
Thanks.


#6

Yes, but where is that code - is it in a template onCreated, a template helper, a template event handler … ?

Or are you using React - which component lifecycle method is it in?


#7

Hello @robfallows ,
I am using react and I call this method inside a Method which is called by button onclick event.
thanks.


#8

Can you create a minimal reproduction on github?


#9

yes, sure. I will do it and let you know once i done.
Thanks


#10

I just tried it and for me it fails as well.
I tested it by calling Meteor.call in the browser console. So the DOM was definitely ready.
Outside of a method callback it works fine.

Aha, I tried it in FireFox, and got this warning message!

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

So it seems the security policy of the browser doesn’t like it.


#12

Hello @robfallows ,
I have created minimal reproduction. Here is the github link-
https://github.com/deepupathak/test/tree/master/
Please check and advice.
Thanks.


#13

@herteby already answered this:

So it seems the security policy of the browser doesn’t like it.

See also here.