<input id="file" type="file"/>
<button id="convert">Convert</button>
<br>
<img id="source" src="" alt="" width="200" height="200">
document
  .getElementById('convert')
  .addEventListener('click', () => {
    let files = document.getElementById('file').files;
    if (files.length > 0) {
      getBase64(files[0]);
    }
});

function getBase64(file) {
  let reader = new FileReader();
  
  reader.readAsDataURL(file);

  reader.onload = function () {
    let img = document.getElementById('source');
    img.src = reader.result;
    console.log(reader.result)
  };
  
  reader.onerror = function (error) {
    console.log('Error: ', error);
  };
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.