JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" accept="image/*" capture="camera" id="files-upload"/>
  <div id="file-to-insert"></div>

CSS

.imageTaken{
    position: absolute;
    width:100%;
    top:0;
    left:0;
  }

JavaScript

var fileToInsert = document.getElementById("file-to-insert");

  document.querySelector('#files-upload').onchange = function(e) {
    validateFiles(this.files);
  };

  function validateFiles (files) {
    if (typeof files !== "undefined") {
      for (var i=0, l=files.length; i<l; i++) {
        uploadFile(files[i]);
      }
    } 
  }

  function uploadFile (file) {
    var div = document.createElement("div"),
        img,
        reader;

    if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
      img = document.createElement("img");
      div.appendChild(img);
      reader = new FileReader();  
      console.log("reader",reader);
      reader.onload = (function (theImg) {
        return function (evt) {
          var src = evt.target.result;
          theImg.src = src;
          theImg.className = "imageTaken";
        };
      }(img));
      reader.readAsDataURL(file);
    }
  
    fileToInsert.appendChild(div);
  }