New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Copy and Paste Files in the Upload


Product Telerik UI for ASP.NET MVC Upload
Progress Telerik UI for ASP.NET MVC version Created with the 2022.2.802 version


How can I copy and paste a file into the Telerik UI for ASP.NET MVC Upload?


  1. Create a paste container and decorate it with the contenteditable HTML attribute.
  2. To paste a copied file, handle the paste event of the container.
  3. To insert the newly pasted file, use the DataTransfer object within the handler.
        .Async(a => a
            .Save("Async_Save", "Upload")
            .Remove("Async_Remove", "Upload")

    <div class="paste-area" contenteditable="true">
        Paste Area
            $(".paste-area").on("paste", function(e){
                if (e.originalEvent.clipboardData.files.length) { // Assert if a file is pasted.
                    const fileObject = e.originalEvent.clipboardData.files[0]; // Get the pasted file object.

                    const fileInput = $("#files")[0]; // Get the file input.
                    const dataTransfer = new DataTransfer(); // Create a new DataTransfer object instance.

                    dataTransfer.items.add(fileObject) // Add the pasted file object to the DataTransfer object.
                    fileInput.files = dataTransfer.files; // Change the file input's files.

                    $("#files").trigger("change"); // Trigger the change event of the Upload.
                } else {
                    "No image data was found in your clipboard. Copy an image first or take a screenshot."

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

More ASP.NET MVC Upload Resources

See Also

In this article