Copy to Clipboard Buttons Not Working in Safari

[geozeke]

Description
When clicking either the Copy to clipboard or Copy download link to clipboard buttons when using Safari, nothing happens. The links are not copied to the clipboard.

Expected behaviour
When clicking either of those buttons, the respective links should be copied to the clipboard and a green popup presents at the bottom of the screen indicating that the links were successfully copied.

What is happening instead?
No response; links are not copied and no green popup is presented.

Additional context
These buttons worked fine in Safari a few releases back, and they seem to work fine in either Chrome or FireFox now. There was just an update to MacOS (bumped to Sonoma v14.5), as well as a new release of Filebrowser in the last two weeks. I can't pinpoint which update may have been associated with the issue.

How to reproduce?
Using Safari, select any file in the Filebrowser window; then click on the Share button at the top of the screen. When you see the popup, click on either the Copy to clipboard button or the Copy download link to clipboard button. Note that no links are copied to the clipboard, and there's no popup indicating successful copy.

Files

[kloon15]

Could u test latest release, there was a PR fixing clipboard issues.

[geozeke]

Thanks for reaching out. I’m running FileBrowser in docker on Ubuntu 22.04. I pulled the latest image and I’m accessing the running container using Safari. The issue still seems to be there (for Safari in macOS, iOS, and iPadOS). The links in this version still copy correctly in FireFox and Chrome.

Not sure if it's helpful, but when I inspect the elements in the sharing popup, this is what shows for the html:

<table>
  <tr>
    <th>#</th>
    <th>Share Duration</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>wZ_RYWCl</td>
    <td>Permanent</td>
    <td class="small">
      <button class="action copy-clipboard" aria-label="Copy to clipboard" title="Copy to clipboard">
        <i class="material-icons">content_paste</i>
      </button>
    </td>
    <td class="small">
      <button class="action copy-clipboard" aria-label="Copy download link to clipboard" title="Copy download link to clipboard">
        <i class="material-icons">content_paste_go</i>
      </button>
    </td>
    <td class="small">
      <button class="action" aria-label="Delete" title="Delete">
        <i class="material-icons">delete</i>
      </button>
    </td>
  </tr>
</table>

[kloon15]

Could u check the console logs in devtools? If u dont get the toast saying link copied u should see an error in console.

[geozeke]

Interesting...nothing shows up in the logs. There's no response when the buttons are pressed, and no entries are generated in the logs.

[kloon15]

Are you accessing filebrowser thru https or http?

[geozeke]

I’m accessing it through https. I’m self-hosting File Browser in docker behind HAProxy with a ZeroSSL certificate (not self-signed). I’m also self-hosting a DNS, so I access File Browser using a FQDN, like this:

https://fb.mynetwork.net

[kloon15]

Does this demo work on Safari?
https://web.dev/async-clipboard/#demos

[geozeke]

It does. The content is copied or pasted as expected, and the toast also shows up as expected. It works on Safari in both macOS and iOS.

Just to make sure I'm not missing something I tested my File Browser instance with Safari, Chrome and FireFox again on several platforms. It works as expected in Chrome on macOS, and FireFox in a Ubuntu virtual machine. In doesn't seem to work in either Safari on macOS, or Chrome and Safari on iOS.