<html lang="en">
<body>
  <input type="file" id="file-input" />
  <button id="upload-btn">Upload</button>
  <img id="img" style="height: 150px; width: 150px; background: #cfcfcf">
  <p id="indicator">Not Ready to Upload</p>
</body>
</html>
const fileInput = document.getElementById("file-input");
const uploadBtn = document.getElementById("upload-btn");
const image = document.getElementById("img");
const indicator = document.getElementById("indicator");
let base64String = "";

fileInput.addEventListener("change", fileSelectedHandler);
uploadBtn.addEventListener("click", fileUploadHandler);

function fileSelectedHandler(event) {
  if (event.target.files && event.target.files[0]) {
    const FR = new FileReader();
    FR.addEventListener("load", function (e) {
      image.src = e.target.result;
      base64String = e.target.result;
      indicator.textContent = "Ready to upload";
    });
    FR.readAsDataURL(event.target.files[0]);
  }
}

function fileUploadHandler() {
  console.log(base64String);
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.