User needs to paste clipboard data into website with CTRL+V, but the data they paste will not be shown to them. How can I make this intuitive?

Question

I am changing a form where we have users paste some data from clipboard (copied from excel) and fill out a few metadata fields about the data.

Previously in the design we were able to have a button that, when clicked, grabbed the data from the user's clipboard. The paste would go through some validation and if the data was valid the button is replaced with a "Submit Form" button.

Like this:

However, because Chrome (which we want to support) doesn't allow this kind of unauthorized access to the clipboard, the users themselves have to either CTRL+V or right click -> paste the data.

We don't really have an interest in showing the user the data they are entering as it could be many rows of data, but this makes pasting the data unintuitive.

Currently what I have is instead of a "Paste Data" button, an indicator that data has not yet been pasted. If the user presses CTRL+V anywhere on the page, the data is grabbed from clipboard and validated, and if valid the indicator is replaced with the "Submit Form" button.

I am pretty unsatisfied with this solution for multiple reasons, mainly that if the user wants to copy/paste metadata into one of the metadata fields, it will also trigger the excel data paste and will tell them it's not valid. This isn't all that bad I guess as it doesn't really slow down the user at all but could be confusing.

Potential options:

Add textbox where they can paste the data, and validation can happen when they do that, just as it does when they type in the metadata fields above.

Keep click to paste data button but have it pull up some kind of pop up that tells user to press ctrl + v. But I feel this is unnecessarily cumbersome for the user.

As a final note, I'll say that the reason we are pasting data like this is that's what the user wants.. They are typically copying the data out of excel spreadsheets that have other data than is necessary here, and would rather copy some portion of it than put it in another file and upload the file. We are replacing an existing desktop application with this web application, so staying as similar to the original as possible is a plus, which is why we're pursuing this method of data upload.

Answer 1

Consider sticking with a regular text input when there is no data present, then showing a preview of the data after pasting.

Doing this will prompt the user to paste data the same way as they would paste data in any other text field. This action won't be blocked by browsers, as it's a simple user input.

Once the data is there, render a short preview (showing first x rows and y columns) and allow the user to clear out that field in some way if they made a mistake or wish to remove it.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

^{download bmml source – Wireframes created with Balsamiq Mockups}