[upload] Support pasting images from the clipboard

[cmrgKoradir]

As a user of a vaadin application, I want to be able to paste images e.g. copied to the clipboard by a snipping tool into an upload component without having to create files for the captures.

• use a tool like windows' "snipping tool" or linux' "spectacle" or an image editor to copy a rectangular image area to the clipboard
• focus a vaadin upload component
• paste (Ctrl+V)

IS
Nothing happens.

SHOULD
Upload the copied image to vaadin.

NOTES
We received a bug report from one of our clients that our application stopped supporting pasting images into Upload components for which they have used "a snipping tool", which was convenient to them because they could upload images "without having the necessity to create a file". (They were using the Brave browser, which according to Brave "is based on the same open-source Chromium code as a number of other browsers".)

Since I could find no update on our side that would have touched such a functionality, I contacted your support chat to check whether a recent bump in Vaadin version (we were upgrading from 14.2.0 to 14.4.1) could have broken this, but they found "no indication that [the upload] component has ever supported copy-paste in the first place".

They also noted that "it could be that it was more of the browser who did the work: the browser created a temporary file, then filled the name into the Upload component" and that a recent update of the client's browser could be to blame for the now missing feature.

We will be implementing a custom workaround to give that functionality back to the client, but feel it would be nice to have this officially supported.

[rolfsmeds]

Hi @cmrgKoradir, I can confirm that the component has never supported uploading by pasting from the clipboard. It's possible that Brave has some kind of trick whereby it somehow emulates a drop upload, and that this trick has since stopped working for some reason.

[fabst2w]

A prototype for a component that allows a user to paste a screenshot in his/her browser you can find here: https://stackoverflow.com/a/73141859/10318272
The browser (triggered by paste event) sends the pasted screenshot (via ClientCallable RPC) to the Vaadin application (server) and the server shows a preview Image in the browser (initiated by the serverside).

[TobiasSagmeister]

Are there any updates to this issue?
We have identified the same requirement and would like to know if it will be solved in the near future.

[rolfsmeds]

No plans or other updates at the moment. You can give a 👍 to the main comment to give it an "upvote", as that will give it more weight in our feature request prioritization.

[TatuLund]

There is an example how to do this with JavaScript in your view in my Gist collection. I am not so sure if this is actually suitable feature for the Upload component itself, but something that should be implemented as separate API in Flow, possibly a more generic Clipboard API.

https://gist.github.com/TatuLund/7a5d38f6bb89bb764eaf677e25364524

[TatuLund]

I opened Clipboard API ticket in Flow vaadin/flow#17703

[mrgreywater]

Here is a hacky way to directly paste into the Upload Component from the clipboard:
https://gist.github.com/mrgreywater/c34b86a7d35b6859a65ca81accfa3019