JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<input type="file" id="inp">

CSS

INPUT {
  padding: 50px;
  border: 1px solid;
}

JavaScript

const input = document.getElementById("inp");


input.addEventListener("change", onFileUpload);


function onFileUpload (e) {
    const file = e.target.files[0];
    
    const id = Math.trunc(Date.now() / 1000);
    const img = _createImage(`img${id}`);
    
    img.src = URL.createObjectURL(file);
    
    img.addEventListener("load", function(e) {
        debugger;
        URL.revokeObjectURL(this.src);
    });
    
    document.body.appendChild(img);
};


function _createImage (id = "img1") {
  const img = document.createElement("img");
  img.id = id;
  img.classList.add("img");
  return img;
}