New to Kendo UI for jQuery? Download free 30-day trial

Add Image Previews before Uploading Files

Depending on your project, you might need to add an image preview before you upload a file when working with the Kendo UI Upload.

The following example demonstrates how to add an image preview and read the file in the select event of the Upload.

<div id="example">
    <h3>Add image preview before uploading file</h3>
        <input type="file" id="files">

      $(document).ready(function() {
          async: {
            saveUrl: "save",
            removeUrl: "remove",
            autoUpload: false
          multiple: false,
          select: function(e) {
            var fileInfo = e.files[0];
            var wrapper = this.wrapper;

              addPreview(fileInfo, wrapper);

      function addPreview(file, wrapper) {
        var raw = file.rawFile;
        var reader  = new FileReader();

        if (raw) {
          reader.onloadend = function () {
            var preview = $("<img class='image-preview'>").attr("src", this.result);

            wrapper.find(".k-file[data-uid='" + file.uid + "'] .k-file-group-wrapper")

      .image-preview {
        position: relative;
        vertical-align: top;
        height: 45px;

See Also

For more runnable examples on the Kendo UI Upload widget, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article