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

Adding Image Previews before Uploading Files in the Upload


Product Telerik UI for ASP.NET Core Upload
Progress Telerik UI for ASP.NET Core version Created with the 2022.2.802 version


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?


  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.
        .Events(e => e.Select("onSelect"))
        .Async(a => a
            .Save("Async_Save", "Upload")
            .Remove("Async_Remove", "Upload")
    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.

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

More ASP.NET Core Upload Resources

See Also

In this article