JSFiddle - React, Tailwind, and code Playground

by jonva

HTML

<div class="row">
      <div class="col-md-12">
        <div id="blah" class="profilePic">
          <img src="http://i.imgur.com/MxPGcXu.gif" />
        </div>
      </div>
    </div>

    <br>

    <div class="row">
      <div class="col-md-12" id="blah">
        <input type="file" onchange="previewFile()">
      </div>
    </div>

CSS

.blahblah {
border: 1px solid red;
}

.profilePic {
border: 1px solid blue;
}

JavaScript

function previewFile(){
        var preview = document.querySelector('img'); //selects the query named img
        var file    = document.querySelector('input[type=file]').files[0]; //sames as here
        var reader  = new FileReader();

        reader.onloadend = function () {
          preview.src = reader.result;
        }

        if (file) {
          reader.readAsDataURL(file); //reads the data as a URL
        } else {
          preview.src = "";
        }

        if (file.width < file.height) {
          document.getElementById("blah").setAttribute("class", "blahblah");
        } else {
          document.getElementById("blah").setAttribute("class", "profilePic");
        }
      }