• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Paste an Image for Upload from the Clipboard


Product Version3.0.0
ProductProgress® KendoReact


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,


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:

View Source
Change Theme:

In this article

Not finding the help you need?