Adding Image Previews before Uploading 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 add an image preview that appears before the user uploads a file when working with the Telerik UI for ASP.NET Core 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.

Index.cshtml

    @(Html.Kendo().Upload()
        .Name("files")
        .Events(e => e.Select("onSelect"))
        .Async(a => a
            .Save("Async_Save", "Upload")
            .Remove("Async_Remove", "Upload")
            .AutoUpload(false)
        )
    )

Script.js

<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.

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: Adding Image Previews before Uploading 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