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.

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.

More ASP.NET Core Upload Resources

• ASP.NET Core Upload Documentation

• ASP.NET Core Upload Demos

• ASP.NET Core Upload Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Copy and Paste Files in the Upload
• Client-Side API Reference of the Upload for ASP.NET Core
• Server-Side API Reference of the Upload for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base