Preview image before upload

Preview image before it will be uploaded on pure js

by Eugen Zubkov

HTML

<img src="" id="avatar_preview" class="avatar" width="150px"/>

<input type="file" id="avatar" name="avatar" accept="image/jpeg,image/png,image/gif">
<input type="hidden" name="MAX_FILE_SIZE" value="5000" />

JavaScript

var input = document.getElementById('avatar');
if(input) {
  input.addEventListener('change', function () {
    getUploadImageUrl(this);
  });
}

function getUploadImageUrl(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      document.getElementById('avatar_preview').setAttribute('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}