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
contenteditableHTML attribute. - To paste a copied file, handle the
pasteevent of the container. - To insert the newly pasted file, use the
DataTransferobject 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.