sumonsbgc
6/25/2018 - 4:47 PM

Preview Image Before Uploading

It is a simple a JavaScript Snippet which is used to preview the image before uploading.

function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function () {
        var output = document.getElementById('user_thumbnail');
        var fileuploadIcon = document.getElementById("file_upload_icon");
        output.style.backgroundImage = "url('" + reader.result + "')";
        output.firstElementChild.style.display = "none";
        fileuploadIcon.style.marginTop = "45px";
    }
    reader.readAsDataURL(event.target.files[0]);
}