hi i use kendo upload to upload image how i can preview image when i upload it im using jquery

Question

thats what i make in jave script $("#ImageUpload").kendoUpload({

    async: {
        saveUrl: null
    },
    validation: {
        allowedExtensions: [".jpg", ".jpeg", ".png", ".jfif"],
        maxFileSize: 0
    },
    multiple: false,
    select: function (e) {
        var files = e.files;
        var file = files[0].rawFile;
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            var byteArray = new Uint8Array(e.target.result);
            var b64encoded = btoa(String.fromCharCode.apply(null, byteArray));
            var data = { ImageName: file.name, Image: b64encoded, ContentType: file.type };
            $("#image").val(JSON.stringify(data));
        }
        fileReader.readAsArrayBuffer(file);
    },
    remove: function (e) {
        $("#image").val("");
    }
});

thats what i have in razor page:

                            <div class="col-md-6">
                                <label class="fw-bold mb-1">Image</label>
                                <input id="ImageUpload" asp-for="ImageName" class="form-control form-control-sm" type="file" />
                                <input type="hidden" id="image" name="image" /> 
                            </div>

type here

[I want to preview image beside name](https://i.stack.imgur.com/NZnBa.png)

`i try code just make uplad to image withour preview it i wanna preview it

`

Answer 1

To preview the uploaded image, you can create an <img> element dynamically and set its src attribute to the base64-encoded image data. You can use below Code :

// Create an <img> element for preview
var img = document.createElement('img');
img.src = "data:" + file.type + ";base64," + b64encoded;
img.style.maxWidth = "100%";

// Append the image to a container element
var previewContainer = document.getElementById("imagePreviewContainer");
previewContainer.innerHTML = ""; // Clear previous previews
previewContainer.appendChild(img);

Also you remove function will be changed like this :

 remove: function (e) {
        $("#image").val("");
        // Clear the image preview
        var previewContainer = document.getElementById("imagePreviewContainer");
        previewContainer.innerHTML = "";
    }