https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
<input class='hidden' onchange="previewFile()" type="file" name="avatar" value="{$user['avatar']}" >
<img id="avatar" src="{$user['avatar']}" style="width: 40px; border-radius: 50px;">
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}