<div class="container">
  <header>
    <h1>Base64 of Files</h1> 
  </header>
  <hr/>
  <div class="row">
    <form class="col-4" name="file-upload">
      <div class="form-group">
        <label>File</label>
        <input type="file" class="form-control" name="myFile" id="myFile">
      </div>
      <button 
        type="button" id="getBase64"
        class="btn btn-primary">Generate Base64</button>
    </form>
    <div class="col-8">
      <div class="form-group">
        <label>Base64 of File
        <a class="float-right" href="https://time2hack.com/2019/09/convert-encode-decode-text-files-to-base64-in-browser/">Read full Article</a>
        </label>
        <textarea
          class="form-control" rows="5"
          id="base64ofFile"
          placeholder="Base64 will appear here"
          ></textarea>
      </div>
    </div>
  </div>
    
</div>

label {
  display: block;
}
body {
  padding-top: 1rem;
}

// code to use FileReader to get base64 of files
const getBase64OfFile = (file, callback) => {
  const fr = new FileReader();
  fr.addEventListener('load', (e) => {
    if(typeof callback === 'function') {
      callback(fr.result);
    }
  });
  fr.readAsDataURL(file);
}

document.addEventListener('DOMContentLoaded', () => {
  const op = document.querySelector('#base64ofFile');
  const btn = document.querySelector('#getBase64');
  const fileInput = document.querySelector('#myFile');

  btn && btn.addEventListener('click', () => {
    const file = fileInput.files[0];
    file && getBase64OfFile(file, (data) => {
      op.innerText = data.split('base64,')[1];
    });
  })
});