<input type="file" id="file-input">
<button id="convert-button">Convert to Base64</button>
<div id="output"></div>
<img id="imageBase64"/>
const fileInput = document.getElementById("file-input");
const convertButton = document.getElementById("convert-button");
const outputDiv = document.getElementById("output");
var base64String = '';
fileInput.addEventListener("change", () => {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    base64String = btoa(reader.result);
  };

  reader.readAsBinaryString(file);
});

convertButton.addEventListener("click", () => {
  let imgElement = document.getElementById("imageBase64");
  imgElement.src = `data:image/png;base64,${base64String}`;
  console.log(base64String);
  // Do something with the base64 string
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.