Adding Image Previews before Uploading 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 add an image preview that appears before the user uploads a file when working with the Telerik UI for ASP.NET MVC Upload?
Solution
- Create a function that executes the logic for adding an image preview upon selecting a file.
- To handle the file selection, subscribe to the
Selectevent. - Within the handler, call the previously created function for each file entry and pass the Upload's wrapper.
@(Html.Kendo().Upload()
.Name("files")
.Events(e => e.Select("onSelect"))
.Async(a => a
.Save("Async_Save", "Upload")
.Remove("Async_Remove", "Upload")
.AutoUpload(false)
)
)
<script>
function onSelect(e){
var wrapper = this.wrapper;
e.files.forEach(file => { // Loop through each file entry.
setTimeout(function () {
addPreview(file, wrapper); // Call the function for adding an image preview and pass both the file object and wrapper.
});
})
}
function addPreview(file, wrapper) {
var raw = file.rawFile; // Get the raw file information.
var reader = new FileReader(); // Create a new FileReader instance.
if (raw) {
reader.onloadend = function () { // Ensure that the file is loaded.
var preview = $("<img class='image-preview'>").attr("src", this.result); // Create an image element.
wrapper.find(".k-file[data-uid='" + file.uid + "'] .k-file-group-wrapper")
.replaceWith(preview); // Replace the HTML markup of the current file with the newly created image.
};
reader.readAsDataURL(raw); // Read the content of the file.
}
}
</script>
For the complete implementation of the suggested approach, refer to the following Telerik REPL example.