5

I am using navigator's clipboard object to copy text into the clipboard using vuejs. It works fine till it is hosted locally, hosting using heroku returns navigator.clipboard as undefined. Does anyone know its workaround?

copyToClipboard(text){
    console.log("inside copyclipboard method")
    console.log(text)
    navigator.clipboard.writeText(text).then(function() {
        console.log("inside write text")
        this.showSuccessfulClipboardCopySnackBar = true
    }.bind(this))
    console.log("after writetext")
}

Result in console when hosted in local server

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
after writetext
inside write text

Result in console when hosted in heroku

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
** Uncaught TypeError: Can not read property 'writeText' of undefined. **
rkpattnaik780
  • 103
  • 2
  • 7
  • 2
    Is the heroku domain running on https? If not, that could be the reason: "As with many new APIs, navigator.clipboard is only supported for pages served over HTTPS. To help prevent abuse, clipboard access is only allowed when a page is the active tab. Pages in active tabs can write to the clipboard without requesting permission, but reading from the clipboard always requires permission." (https://developers.google.com/web/updates/2018/03/clipboardapi) – leuquim Jan 04 '19 at 11:59
  • @leuquim I finally got SSL for the domain and it is still not working. – rkpattnaik780 Jan 09 '19 at 13:00
  • Is the javascript being loaded securely? Also, check the Chrome site settings for the heroku app to see if the Clipboard is "Blocked". – leuquim Jan 09 '19 at 21:08

0 Answers0