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

Add 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

  1. Create a function that executes the logic for adding an image preview upon selecting a file.
  2. To handle the file selection, subscribe to the Select event.
  3. 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.

In this article