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

Copy and Paste Files in the Upload

Environment

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

Description

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

Solution

  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.
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .Save("Async_Save", "Upload")
            .Remove("Async_Remove", "Upload")
            .AutoUpload(false)
        )
    )

    <div class="paste-area" contenteditable="true">
        Paste Area
    </div>
    <script>
        $(function(){
            $(".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 {
                  alert(
                    "No image data was found in your clipboard. Copy an image first or take a screenshot."
                  );
                }
            });
        });
    </script>

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

In this article