Paste an Image for Upload from the Clipboard

Updated over 6 months ago

Environment

Product Version	3.0.0
Product	Progress® KendoReact Upload

Description

Do you have any idea how can I use Copy and Paste to automatically place pictures inside the React Upload Component?

I want to Copy a Picture using Ctrl+C from my computer, go to the browser and Paste it via Ctrl+V, if there is a React Upload Component on the page, I need it to automatically discover the Picture that I was holding on the Ctrl+C and place it inside the component for Uploading,

Solution

This will require the following setup:

1. Add a DIV element that will be the paste zone.
2. Add an onPaste event listener to that DIV.
3. Handle the onPaste event to loop over the clipboard data.
4. If there are images in the clipboard data, load them into the Upload by updating the state.

This is an example showcasing this:

Change Theme

Theme

Loading ...