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

Copy and Paste Files in the Upload

Environment

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

Description

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

Solution

Create a paste container and decorate it with the contenteditable HTML attribute.
To paste a copied file, handle the paste event of the container.
To insert the newly pasted file, use the DataTransfer object within the handler.

Index.cshtml
    @(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.js
    <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.

Copy and Paste Files in the Upload

Environment

Description

Solution

More ASP.NET MVC Upload Resources

See Also